react-native-molecules 0.5.0-beta.23 → 0.5.0-beta.25

package/components/Select/utils.ts

@@ -39,6 +39,13 @@ const triggerDefaultStyles = StyleSheet.create(theme => ({
             },
         },
     },
+    triggerIcon: {
+        marginLeft: theme.spacings['2'],
+        color: theme.colors.onSurfaceVariant,
+    },
+}));
+
+const outlineDefaultStyles = StyleSheet.create(theme => ({
     outline: {
         position: 'absolute',
         top: 0,
@@ -85,10 +92,6 @@ const triggerDefaultStyles = StyleSheet.create(theme => ({
             },
         },
     },
-    triggerIcon: {
-        marginLeft: theme.spacings['2'],
-        color: theme.colors.onSurfaceVariant,
-    },
 }));
 
 export const defaultStyles = StyleSheet.create(theme => ({
@@ -115,5 +118,9 @@ export const triggerStyles = getRegisteredComponentStylesWithFallback(
     'Select_Trigger',
     triggerDefaultStyles,
 );
+export const selectOutlineStyles = getRegisteredComponentStylesWithFallback(
+    'SelectOutline',
+    outlineDefaultStyles,
+);
 
 export const styles = getRegisteredComponentStylesWithFallback('Select', defaultStyles);

package/components/Switch/Switch.ios.tsx

@@ -1,3 +1,4 @@
+import { useControlledValue } from '@react-native-molecules/utils/hooks';
 import { forwardRef, memo } from 'react';
 import {
     Switch as NativeSwitch,
@@ -6,7 +7,6 @@ import {
     type ViewStyle,
 } from 'react-native';
 
-import { useControlledValue } from '../../hooks';
 import type { IconType } from '../Icon';
 
 export type Props = SwitchProps & {

package/components/Switch/Switch.tsx

@@ -1,3 +1,4 @@
+import { useControlledValue, useLatest } from '@react-native-molecules/utils/hooks';
 import { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import {
     Animated,
@@ -9,7 +10,7 @@ import {
     type ViewStyle,
 } from 'react-native';
 
-import { useActionState, useControlledValue, useLatest } from '../../hooks';
+import { useActionState } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
 import { Icon, type IconType } from '../Icon';
 import { switchStyles, useSwitchColors } from './utils';

package/components/Tabs/Tabs.tsx

@@ -1,3 +1,5 @@
+import { noop } from '@react-native-molecules/utils/helpers/lodash';
+import { useControlledValue } from '@react-native-molecules/utils/hooks';
 import {
     cloneElement,
     type ComponentType,
@@ -22,9 +24,7 @@ import {
 } from 'react-native';
 
 import { typedMemo } from '../../hocs';
-import { useControlledValue } from '../../hooks';
 import { extractSubcomponents } from '../../utils/extractSubcomponents';
-import { noop } from '../../utils/lodash';
 import type { TabItemProps } from './TabItem';
 import { tabsStyles } from './utils';
 

package/components/TextInput/TextInput.tsx

@@ -1,3 +1,4 @@
+import { useControlledValue, useLatest } from '@react-native-molecules/utils/hooks';
 import React, {
     memo,
     type PropsWithoutRef,
@@ -31,9 +32,7 @@ import {
     View,
 } from 'react-native';
 
-import { useActionState } from '../../hooks/useActionState';
-import useControlledValue from '../../hooks/useControlledValue';
-import useLatest from '../../hooks/useLatest';
+import { useActionState } from '../../hooks';
 import { createSyntheticEvent, resolveStateVariant } from '../../utils';
 import { extractSubcomponents } from '../../utils/extractSubcomponents';
 import { HelperText } from '../HelperText';
@@ -645,6 +644,7 @@ export const TextInputLeft = memo(
                 style={[textInputLeftStyles.leftElement, style]}
                 onLayout={handleLayout}
                 accessibilityRole="none"
+                tabIndex={-1}
                 {...rest}>
                 {children}
             </Pressable>
@@ -683,6 +683,7 @@ export const TextInputRight = memo(
                 onPress={onPress}
                 style={[textInputRightStyles.rightElement, style]}
                 accessibilityRole="none"
+                tabIndex={-1}
                 {...rest}>
                 {children}
             </Pressable>

package/components/TimePicker/AnalogClock.tsx

@@ -1,3 +1,4 @@
+import { useLatest } from '@react-native-molecules/utils/hooks';
 import { memo, useCallback, useMemo, useRef } from 'react';
 import {
     type GestureResponderEvent,
@@ -7,7 +8,6 @@ import {
     type ViewProps,
 } from 'react-native';
 
-import { useLatest } from '../../hooks';
 import AnalogClockHours from './AnalogClockHours';
 import AnalogClockMinutes from './AnalogClockMinutes';
 import AnimatedClockSwitcher from './AnimatedClockSwitcher';

package/components/TimePicker/TimeInputs.tsx

@@ -1,10 +1,10 @@
 // @typescript-eslint/no-unused-vars
 // WORK IN PROGRESS
 
+import { useLatest } from '@react-native-molecules/utils/hooks';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { TextInput as TextInputNative, useWindowDimensions, View } from 'react-native';
 
-import { useLatest } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
 import { Text } from '../Text';
 import AmPmSwitcher from './AmPmSwitcher';

package/components/TimePicker/TimePicker.tsx

@@ -1,8 +1,8 @@
+import { useControlledValue } from '@react-native-molecules/utils/hooks';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { type StyleProp, View, type ViewStyle } from 'react-native';
 
 import { getRegisteredComponentWithFallback } from '../../core';
-import { useControlledValue } from '../../hooks';
 import { format, parse } from '../../utils/date-fns';
 import { useOptionalDatePickerContext } from '../DatePicker/context';
 import AnalogClock from './AnalogClock';

package/components/TimePicker/TimePickerModal.tsx

@@ -1,9 +1,9 @@
+import { useControlledValue } from '@react-native-molecules/utils/hooks';
 import type { ReactNode } from 'react';
 import { memo, useMemo } from 'react';
 import { KeyboardAvoidingView, Platform, View } from 'react-native';
 
 import { getRegisteredComponentWithFallback } from '../../core';
-import { useControlledValue } from '../../hooks';
 import { DatePickerActions, DatePickerProvider } from '../DatePicker';
 import type {
     DatePickerContextType,

package/components/Tooltip/Tooltip.tsx

@@ -1,3 +1,4 @@
+import { useToggle } from '@react-native-molecules/utils/hooks';
 import {
     createContext,
     memo,
@@ -9,7 +10,6 @@ import {
     useRef,
 } from 'react';
 
-import { useToggle } from '../../hooks';
 import { extractSubcomponents } from '../../utils/extractSubcomponents';
 
 export type Props = {

package/components/TouchableRipple/TouchableRipple.tsx

@@ -1,3 +1,4 @@
+import { noop } from '@react-native-molecules/utils/helpers/lodash';
 import { forwardRef, memo, type ReactNode, useCallback, useRef } from 'react';
 import {
     type GestureResponderEvent,
@@ -10,7 +11,6 @@ import {
 import { StyleSheet } from 'react-native-unistyles';
 
 import { useTheme } from '../../hooks/useTheme';
-import { noop } from '../../utils/lodash';
 import { Slot } from '../Slot';
 import { rippleColorFromBackground } from './rippleFromForegroundColor';
 import { touchableRippleStyles } from './utils';

package/hocs/index.tsx

@@ -1,5 +1,5 @@
-export { default as typedMemo } from './typedMemo';
 export {
     useCurrentIndexStore,
     default as withKeyboardAccessibility,
 } from './withKeyboardAccessibility';
+export { typedMemo } from '@react-native-molecules/utils/hocs';

package/hocs/withKeyboardAccessibility.tsx

@@ -1,3 +1,5 @@
+import { createFastContext } from '@react-native-molecules/utils/fast-context';
+import { useLatest } from '@react-native-molecules/utils/hooks';
 import {
     type ComponentType,
     forwardRef,
@@ -15,9 +17,6 @@ import type { FlatList } from 'react-native';
 import type { SectionList } from 'react-native';
 import { Platform } from 'react-native';
 
-import { createFastContext } from '../fast-context';
-import useLatest from '../hooks/useLatest';
-
 export type Store = {
     currentIndex: number | null;
 };

package/hooks/index.tsx

@@ -4,7 +4,6 @@ export * from './useActionState';
 export * from './useActive';
 export { default as useColorMode } from './useColorMode';
 export { useContrastColor } from './useContrastColor';
-export { default as useControlledValue } from './useControlledValue';
 export * from './useFocus';
 export {
     type NumberMaskConfig,
@@ -13,10 +12,7 @@ export {
 } from './useHandleNumberFormat';
 export * from './useHover';
 export * from './useKeyboardDismissable';
-export { default as useLatest } from './useLatest';
-export { useMediaQuery } from './useMediaQuery';
-export { useMergedRefs } from './useMergedRefs';
-export { default as usePrevious } from './usePrevious';
+export * from './useMediaQuery';
 export * from './useQueryFilter';
 export * from './useTheme';
-export { default as useToggle } from './useToggle';
+export * from '@react-native-molecules/utils/hooks';

package/hooks/useContrastColor.ts

@@ -1,8 +1,7 @@
+import { resolveContrastColor } from '@react-native-molecules/utils/helpers/resolveContrastColor';
 import { useMemo } from 'react';
 import { useUnistyles } from 'react-native-unistyles';
 
-import { resolveContrastColor } from '../utils/color';
-
 export const useContrastColor = (bgColor: string, lightColor?: string, darkColor?: string) => {
     const isDarkMode = useUnistyles().theme.dark;
 

package/hooks/useFilePicker.tsx

@@ -1,3 +1,4 @@
+import { isNil, omitBy } from '@react-native-molecules/utils/helpers/lodash';
 import { useCallback } from 'react';
 
 import {
@@ -5,7 +6,6 @@ import {
     type DocumentPickerOptions,
     type DocumentResult,
 } from '../utils/DocumentPicker';
-import { isNil, omitBy } from '../utils/lodash';
 
 export const useFilePicker = (options: DocumentPickerOptions) => {
     const openFilePicker = useCallback(

package/hooks/useHandleNumberFormat.tsx

@@ -1,9 +1,9 @@
+import { isNil } from '@react-native-molecules/utils/helpers/lodash';
+import { usePrevious } from '@react-native-molecules/utils/hooks';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';
 
 import { formatNumberWithMask, normalizeToNumberString } from '../utils';
-import { isNil } from '../utils/lodash';
-import usePrevious from './usePrevious';
 
 export type NumberMaskConfig = {
     prefix?: string;

package/hooks/useMediaQuery.tsx

@@ -1,8 +1,7 @@
+import { isNil } from '@react-native-molecules/utils/helpers/lodash';
 import { useMemo } from 'react';
 import { useWindowDimensions } from 'react-native';
 
-import { isNil } from '../utils/lodash';
-
 type Query = {
     maxWidth?: number;
     minWidth?: number;

package/package.json

@@ -1,119 +1,96 @@
 {
-    "name": "react-native-molecules",
-    "version": "0.5.0-beta.23",
-    "author": "Thet Aung <thetaung.dev@gmail.com>",
-    "license": "MIT",
-    "main": "index.ts",
-    "sideEffects": [
-        "components/DatePicker/context.tsx",
-        "components/DatePickerInline/store.tsx",
-        "components/List/context.tsx",
-        "components/Select/context.tsx",
-        "components/TimePicker/context.tsx",
-        "components/Popover/common.ts"
-    ],
-    "files": [
-        "components",
-        "context-bridge",
-        "core",
-        "fast-context",
-        "hocs",
-        "hooks",
-        "shortcuts-manager",
-        "styles",
-        "types",
-        "utils",
-        "index.ts",
-        "!**/__tests__",
-        "!**/__fixtures__",
-        "!**/__mocks__"
-    ],
-    "scripts": {
-        "fix-typescript-output": "cd lib/typescript && mv src/* . && rm -rf src",
-        "example:expo": "pnpm --filter=expo-example run",
-        "start": "MOLECULES_ENV=storybook pnpm storybook",
-        "run:testcases": "pnpm workspace test-cases start",
-        "test": "MOLECULES_ENV=storybook jest && pnpm test-storybook",
-        "test-jest": "jest",
-        "bundle": "MOLECULES_ENV=release rm -rf dist && mkdir -p dist && npm pack --pack-destination=dist",
-        "do-release": "npm publish ./dist/react-native-molecules-$npm_package_version.tgz --access=public",
-        "release": "pnpm bundle && pnpm do-release",
-        "release:dev": "npm version prerelease --preid=dev && pnpm release --tag=dev",
-        "storybook": "MOLECULES_ENV=storybook storybook dev -p 6006",
-        "test-storybook": "test-storybook",
-        "coverage": "cp coverage/storybook/coverage-storybook.json coverage/coverage-storybook.json && npx nyc report --reporter=html -t coverage --report-dir coverage/lcov-report",
-        "test:coverage": "pnpm test-jest --coverage && pnpm test-storybook --coverage && pnpm coverage",
-        "build-storybook": "storybook build",
-        "chromatic:all": "MOLECULES_ENV=storybook npx chromatic --project-token=934368a7f6c9",
-        "chromatic": "MOLECULES_ENV=storybook pnpm chromatic:all --only-changed",
-        "perf": "npx reassure"
-    },
-    "dependencies": {
-        "@gorhom/portal": "^1.0.14",
-        "@radix-ui/react-compose-refs": "^1.1.2",
-        "@react-native-vector-icons/feather": "^12.4.0",
-        "@react-native-vector-icons/material-design-icons": "^12.4.0",
-        "color": "^4.2.3",
-        "date-fns": "^4.1.0",
-        "eventemitter2": "^6.4.9",
-        "flubber": "^0.4.2",
-        "use-sync-external-store": "^1.2.0"
-    },
-    "peerDependencies": {
-        "@react-native-documents/picker": "^10.1.2",
-        "react": "19.1.0",
-        "react-native": "0.81.4",
-        "react-native-svg": ">=12.1.0",
-        "react-native-unistyles": "^3.0.22",
-        "react-native-web": "~0.21.1",
-        "react-native-reanimated": ">=4.0.0",
-        "react-native-redash": ">=18.0.0"
-    },
-    "devDependencies": {
-        "@types/flubber": "^0.4.0",
-        "react-native-svg": "^15.10.1",
-        "@react-native-documents/picker": "^10.1.2",
-        "@types/color": "^3.0.3",
-        "@types/jest": "^29.1.2",
-        "@types/react": "~19.1.10",
-        "@types/use-sync-external-store": "^1.5.0",
-        "react": "19.1.0",
-        "react-native": "0.81.4",
-        "react-native-builder-bob": "^0.17.1",
-        "react-native-reanimated": "~4.1.1",
-        "react-native-unistyles": "^3.2.4",
-        "react-native-web": "~0.21.1"
-    },
-    "eslintIgnore": [
-        "node_modules/",
-        "lib/",
-        "test-cases/node_modules",
-        "dist",
-        "cache"
-    ],
-    "react-native-builder-bob": {
-        "source": "src",
-        "output": "lib",
-        "targets": [
-            [
-                "commonjs",
-                {
-                    "configFile": true
-                }
-            ],
-            [
-                "module",
-                {
-                    "configFile": true
-                }
-            ],
-            [
-                "typescript",
-                {
-                    "project": "tsconfig.build.json",
-                    "rootDir": "src"
-                }
-            ]
-        ]
-    }
-}
+  "name": "react-native-molecules",
+  "version": "0.5.0-beta.25",
+  "author": "Thet Aung <thetaung.dev@gmail.com>",
+  "license": "MIT",
+  "main": "index.ts",
+  "sideEffects": [
+    "components/DatePicker/context.tsx",
+    "components/DatePickerInline/store.tsx",
+    "components/List/context.tsx",
+    "components/Select/context.tsx",
+    "components/TimePicker/context.tsx",
+    "components/Popover/common.ts"
+  ],
+  "files": [
+    "components",
+    "context-bridge",
+    "core",
+    "fast-context",
+    "hocs",
+    "hooks",
+    "shortcuts-manager",
+    "styles",
+    "types",
+    "utils",
+    "index.ts",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
+  ],
+  "dependencies": {
+    "@gorhom/portal": "^1.0.14",
+    "@radix-ui/react-compose-refs": "^1.1.2",
+    "@react-native-vector-icons/feather": "^12.4.0",
+    "@react-native-vector-icons/material-design-icons": "^12.4.0",
+    "color": "^4.2.3",
+    "date-fns": "^4.1.0",
+    "eventemitter2": "^6.4.9",
+    "flubber": "^0.4.2",
+    "use-sync-external-store": "^1.2.0",
+    "@react-native-molecules/utils": "^1.0.0-beta.6"
+  },
+  "peerDependencies": {
+    "@react-native-documents/picker": "^10.1.2",
+    "react": "19.1.0",
+    "react-native": "0.81.4",
+    "react-native-svg": ">=12.1.0",
+    "react-native-unistyles": "^3.0.22",
+    "react-native-web": "~0.21.1",
+    "react-native-reanimated": ">=4.0.0",
+    "react-native-redash": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/flubber": "^0.4.0",
+    "react-native-svg": "^15.10.1",
+    "@react-native-documents/picker": "^10.1.2",
+    "@types/color": "^3.0.3",
+    "@types/jest": "^29.1.2",
+    "@types/react": "~19.1.10",
+    "@types/use-sync-external-store": "^1.5.0",
+    "react": "19.1.0",
+    "react-native": "0.81.4",
+    "react-native-builder-bob": "^0.17.1",
+    "react-native-reanimated": "~4.1.1",
+    "react-native-unistyles": "^3.2.4",
+    "react-native-web": "~0.21.1"
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/",
+    "test-cases/node_modules",
+    "dist",
+    "cache"
+  ],
+  "scripts": {
+    "fix-typescript-output": "cd lib/typescript && mv src/* . && rm -rf src",
+    "example:expo": "pnpm --filter=expo-example run",
+    "start": "MOLECULES_ENV=storybook pnpm storybook",
+    "run:testcases": "pnpm workspace test-cases start",
+    "test": "MOLECULES_ENV=storybook jest && pnpm test-storybook",
+    "test-jest": "jest",
+    "bundle": "MOLECULES_ENV=release rm -rf dist && mkdir -p dist && pnpm pack --pack-destination=dist",
+    "do-release": "npm publish ./dist/react-native-molecules-$npm_package_version.tgz --access=public",
+    "release": "pnpm bundle && pnpm do-release",
+    "release:dev": "npm version prerelease --preid=dev --tag-version-prefix=\"react-native-molecules-v\" && pnpm release --tag=dev",
+    "release:beta": "npm version prerelease --preid=beta --tag-version-prefix=\"react-native-molecules-v\" && pnpm release --tag=beta",
+    "storybook": "MOLECULES_ENV=storybook storybook dev -p 6006",
+    "test-storybook": "test-storybook",
+    "coverage": "cp coverage/storybook/coverage-storybook.json coverage/coverage-storybook.json && npx nyc report --reporter=html -t coverage --report-dir coverage/lcov-report",
+    "test:coverage": "pnpm test-jest --coverage && pnpm test-storybook --coverage && pnpm coverage",
+    "build-storybook": "storybook build",
+    "chromatic:all": "MOLECULES_ENV=storybook npx chromatic --project-token=934368a7f6c9",
+    "chromatic": "MOLECULES_ENV=storybook pnpm chromatic:all --only-changed",
+    "perf": "npx reassure"
+  }
+}

package/shortcuts-manager/ShortcutsManager/ShortcutsManager.tsx

@@ -1,6 +1,6 @@
+import { keyBy } from '@react-native-molecules/utils/helpers/lodash';
 import { memo, useContext, useEffect, useMemo, useRef } from 'react';
 
-import { keyBy } from '../../utils/lodash';
 import EventsManager from '../EventsManager';
 import type { Shortcut } from '../types';
 import {

package/shortcuts-manager/ShortcutsManager/utils.tsx

@@ -1,6 +1,6 @@
+import { createFastContext } from '@react-native-molecules/utils/fast-context';
 import type { ReactNode } from 'react';
 
-import { createFastContext } from '../../fast-context';
 import type { Scope, Shortcut } from '../types';
 
 export type ShortcutsManagerContextType = {

package/shortcuts-manager/useSetScopes/useSetScopes.tsx

@@ -1,6 +1,6 @@
+import { keyBy } from '@react-native-molecules/utils/helpers/lodash';
 import { useCallback } from 'react';
 
-import { keyBy } from '../../utils/lodash';
 import { useShortcutsManagerStoreRef } from '../ShortcutsManager/utils';
 import type { Scope } from '../types';
 

package/shortcuts-manager/useShortcut/useShortcut.tsx

@@ -1,6 +1,6 @@
+import { useLatest } from '@react-native-molecules/utils/hooks';
 import { useCallback, useEffect } from 'react';
 
-import useLatest from '../../hooks/useLatest';
 import { useShortcutsManagerStoreRef } from '../ShortcutsManager';
 import type { ShortcutEventDetail } from '../types';
 import { calculateShortcutEventName } from '../utils';

package/utils/extractTextStyles.ts

@@ -1,7 +1,6 @@
+import { memoize } from '@react-native-molecules/utils/helpers/lodash';
 import type { TextStyle } from 'react-native';
 
-import { memoize } from './lodash';
-
 const textStyleProps = [
     'color',
     'fontFamily',

package/utils/formatNumberWithMask/formatNumberWithMask.ts

@@ -1,5 +1,6 @@
+import { isNil } from '@react-native-molecules/utils/helpers/lodash';
+
 import { createNumberMask, type CreateNumberMaskProps } from '../createNumberMask';
-import { isNil } from '../lodash';
 import { formatWithMask } from './formatWithMask';
 
 export type FormatNumberWithMaskProps = CreateNumberMaskProps & {

package/utils/index.ts

@@ -1,7 +1,5 @@
 export { addEventListener, addListener } from './addEventListener';
 export { BackgroundContext } from './backgroundContext';
-export { default as color, resolveContrastColor } from './color';
-export * from './compare';
 export { default as composeEventHandlers } from './composeEventHandlers';
 export { createNumberMask, type CreateNumberMaskProps } from './createNumberMask';
 export * from './createSyntheticEvent';
@@ -16,5 +14,4 @@ export {
     normalizeToNumberString,
     type NormalizeToNumberStringProps,
 } from './normalizeToNumberString';
-export { Repository } from './repository';
 export * from './resolveStateVariant';

package/utils/normalizeToNumberString/normalizeToNumberString.ts

@@ -1,4 +1,4 @@
-import { isNil } from '../lodash';
+import { isNil } from '@react-native-molecules/utils/helpers/lodash';
 
 export type NormalizeToNumberStringProps = {
     text: string;