@codeleap/mobile 5.1.4 → 5.2.0

package/dist/components/CalendarInput/index.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useState } from 'react';
 import { useCompositionStyles } from '@codeleap/styles';
 import { MobileStyleRegistry } from '../../Registry';
 import { useStylesFor } from '../../hooks';
@@ -7,49 +7,23 @@ import { Calendar } from '../Calendar';
 import { TextInput } from '../TextInput';
 import dayjs from 'dayjs';
 import Animated, { FadeOut, FadeIn } from 'react-native-reanimated';
-import { globalState } from '@codeleap/store';
-import { useBooleanToggle, useId } from '@codeleap/hooks';
 import { useInputBase } from '../InputBase';
 import { fields } from '@codeleap/form';
+import { useInputOverlay } from '../InputBase/useInputOverlay';
 export * from './styles';
 export * from './types';
-const calendarStore = globalState({});
-const useCalendar = (id, autoClosePeersCalendars) => {
-    if (!autoClosePeersCalendars)
-        return useBooleanToggle(false);
-    const isOpen = calendarStore.use(state => state[id]);
-    const toggle = useCallback(() => {
-        const isCurrentlyOpen = calendarStore.value[id];
-        const isAnyOtherOpen = Object.entries(calendarStore.value).some(([key, isOpen]) => key !== id && isOpen);
-        const newValues = Object.keys(calendarStore.value).reduce((acc, key) => {
-            acc[key] = false;
-            return acc;
-        }, {});
-        if (isAnyOtherOpen && !isCurrentlyOpen) {
-            calendarStore.set(newValues);
-            setTimeout(() => {
-                calendarStore.set({ [id]: true });
-            }, 100);
-        }
-        else {
-            calendarStore.set({ ...newValues, [id]: !isCurrentlyOpen });
-        }
-    }, []);
-    return [isOpen, toggle];
-};
 export const CalendarInput = (props) => {
     const { style, value, onValueChange, disabled, gap, calendarPosition, rightIcon, leftIcon, autoClosePeersCalendars, field, format, overlay, ...textInputProps } = {
         ...CalendarInput.defaultProps,
         ...props
     };
-    const id = useId();
     const styles = useStylesFor(CalendarInput.styleRegistryName, style);
     const compositionStyles = useCompositionStyles(['calendar', 'input'], styles);
     const { inputValue, onInputValueChange, } = useInputBase(field, fields.date, { value, onValueChange });
     const [inputHeight, setInputHeight] = useState(0);
-    const [isOpen, toggle] = useCalendar(id, autoClosePeersCalendars);
+    const [isOpen, toggle] = useInputOverlay(autoClosePeersCalendars);
     return (<View style={[styles.wrapper, { position: 'relative' }]}>
-      <TextInput placeholder='Select Date' disabled={disabled} {...textInputProps} leftIcon={!leftIcon ? null : {
+      <TextInput placeholder='Select Date' disabled={disabled} {...textInputProps} style={compositionStyles.input} leftIcon={!leftIcon ? null : {
             ...leftIcon,
             onPress: toggle,
         }} rightIcon={!rightIcon ? null : {

package/dist/components/CalendarInput/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CalendarInput/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CalendarInput/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/InputBase/useInputOverlay.d.ts

@@ -0,0 +1 @@
+export declare const useInputOverlay: (autoClosePeersOverlays: boolean, providedId?: string) => any[] | readonly [boolean, (value?: boolean) => void];

package/dist/components/InputBase/useInputOverlay.js

@@ -0,0 +1,30 @@
+import { useBooleanToggle } from '@codeleap/hooks';
+import { globalState } from '@codeleap/store';
+import { useCallback } from 'react';
+import { useId } from '@codeleap/hooks';
+const inputOverlayStore = globalState({});
+export const useInputOverlay = (autoClosePeersOverlays, providedId) => {
+    if (!autoClosePeersOverlays)
+        return useBooleanToggle(false);
+    const id = useId(providedId);
+    const isOpen = inputOverlayStore.use(state => state[id]);
+    const toggle = useCallback(() => {
+        const isCurrentlyOpen = inputOverlayStore.value[id];
+        const isAnyOtherOpen = Object.entries(inputOverlayStore.value).some(([key, isOpen]) => key !== id && isOpen);
+        const newValues = Object.keys(inputOverlayStore.value).reduce((acc, key) => {
+            acc[key] = false;
+            return acc;
+        }, {});
+        if (isAnyOtherOpen && !isCurrentlyOpen) {
+            inputOverlayStore.set(newValues);
+            setTimeout(() => {
+                inputOverlayStore.set({ [id]: true });
+            }, 100);
+        }
+        else {
+            inputOverlayStore.set({ ...newValues, [id]: !isCurrentlyOpen });
+        }
+    }, []);
+    return [isOpen, toggle];
+};
+//# sourceMappingURL=useInputOverlay.js.map

package/dist/components/InputBase/useInputOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInputOverlay.js","sourceRoot":"","sources":["../../../src/components/InputBase/useInputOverlay.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAEvC,MAAM,iBAAiB,GAAG,WAAW,CAAC,EAAE,CAAC,CAAA;AAEzC,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,sBAA+B,EAAE,UAAmB,EAAE,EAAE;IACtF,IAAI,CAAC,sBAAsB;QAAE,OAAO,gBAAgB,CAAC,KAAK,CAAC,CAAA;IAE3D,MAAM,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,CAAA;IAE5B,MAAM,MAAM,GAAG,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAA;IAExD,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,MAAM,eAAe,GAAG,iBAAiB,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;QACnD,MAAM,cAAc,GAAG,MAAM,CAAC,OAAO,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,IAAI,CACjE,CAAC,CAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC,GAAG,KAAK,EAAE,IAAI,MAAM,CACxC,CAAA;QAED,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE;YACzE,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;YAChB,OAAO,GAAG,CAAA;QACZ,CAAC,EAAE,EAA6B,CAAC,CAAA;QAEjC,IAAI,cAAc,IAAI,CAAC,eAAe,EAAE;YACtC,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;YAEhC,UAAU,CAAC,GAAG,EAAE;gBACd,iBAAiB,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,CAAA;YACvC,CAAC,EAAE,GAAG,CAAC,CAAA;SACR;aAAM;YACL,iBAAiB,CAAC,GAAG,CAAC,EAAE,GAAG,SAAS,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,eAAe,EAAE,CAAC,CAAA;SAChE;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AACzB,CAAC,CAAA"}

package/dist/components/TimeInput/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles';
+import { TimeInputProps } from './types';
+export * from './styles';
+export * from './types';
+export declare const TimeInput: {
+    (props: TimeInputProps): JSX.Element;
+    styleRegistryName: string;
+    elements: string[];
+    rootElement: string;
+    withVariantTypes<S extends AnyRecord>(styles: S): (props: StyledComponentProps<TimeInputProps, S>) => IJSX;
+    defaultProps: Partial<TimeInputProps>;
+};

package/dist/components/TimeInput/index.js

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { useCompositionStyles } from '@codeleap/styles';
+import dayjs from 'dayjs';
+import Animated, { FadeOut, FadeIn } from 'react-native-reanimated';
+import { fields } from '@codeleap/form';
+import DatePicker from 'react-native-date-picker';
+import { useStylesFor } from '../../hooks';
+import { useInputBase } from '../InputBase';
+import { View } from '../View';
+import { TextInput } from '../TextInput';
+import { MobileStyleRegistry } from '../../Registry';
+import { useInputOverlay } from '../InputBase/useInputOverlay';
+export * from './styles';
+export * from './types';
+export const TimeInput = (props) => {
+    const { style, value, onValueChange, disabled, gap, timePickerPosition, rightIcon, leftIcon, autoClosePeersOverlays, field, format, overlay, ...textInputProps } = {
+        ...TimeInput.defaultProps,
+        ...props
+    };
+    const styles = useStylesFor(TimeInput.styleRegistryName, style);
+    const compositionStyles = useCompositionStyles(['input'], styles);
+    const { inputValue, onInputValueChange, } = useInputBase(field, fields.date, { value, onValueChange });
+    const [inputHeight, setInputHeight] = useState(0);
+    const [isOpen, toggle] = useInputOverlay(autoClosePeersOverlays);
+    return (<View style={[styles.wrapper, { position: 'relative' }]}>
+      <TextInput placeholder='Select a time' disabled={disabled} {...textInputProps} style={compositionStyles.input} leftIcon={!leftIcon ? null : {
+            ...leftIcon,
+            onPress: toggle,
+        }} rightIcon={!rightIcon ? null : {
+            ...rightIcon,
+            onPress: toggle,
+        }} value={!inputValue ? '' : dayjs(inputValue).format(format)} onValueChange={() => inputValue} onPress={disabled ? null : toggle} innerWrapperProps={{
+            rippleDisabled: true,
+        }} focused={isOpen} onLayout={(e) => setInputHeight(e.nativeEvent.layout.height)}/>
+
+      {!isOpen || disabled ? null : (<Animated.View exiting={FadeOut.duration(150)} entering={FadeIn.duration(150)} style={overlay ? {
+                position: 'absolute',
+                zIndex: 1,
+                [timePickerPosition]: 0,
+                top: inputHeight + gap,
+            } : {
+                marginTop: gap,
+            }}>
+          <View style={styles.timePicker}>
+            <DatePicker mode='time' onDateChange={onInputValueChange} date={inputValue ?? new Date()}/>
+          </View>
+        </Animated.View>)}
+    </View>);
+};
+TimeInput.styleRegistryName = 'TimeInput';
+TimeInput.elements = ['wrapper', 'timePicker', 'input'];
+TimeInput.rootElement = 'wrapper';
+TimeInput.withVariantTypes = (styles) => {
+    return TimeInput;
+};
+TimeInput.defaultProps = {
+    gap: 8,
+    timerPickerPosition: 'left',
+    autoClosePeersCalendars: false,
+    format: 'hh:mm A',
+    overlay: true,
+};
+MobileStyleRegistry.registerComponent(TimeInput);
+//# sourceMappingURL=index.js.map

package/dist/components/TimeInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/TimeInput/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/TimeInput/styles.d.ts

@@ -0,0 +1,2 @@
+import { TextInputComposition } from '../TextInput';
+export type TimeInputComposition = 'wrapper' | `input${Capitalize<TextInputComposition>}` | 'timePicker';

package/dist/components/TimeInput/styles.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=styles.js.map

package/dist/components/TimeInput/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/TimeInput/styles.ts"],"names":[],"mappings":""}

package/dist/components/TimeInput/types.d.ts

@@ -0,0 +1,23 @@
+import { StyledProp } from '@codeleap/styles';
+import { TimeInputComposition } from './styles';
+import { DateField } from '@codeleap/form';
+import { TextInputProps } from '../TextInput';
+export type TimeInputProps = Omit<TextInputProps, 'value' | 'onValueChange' | 'field' | 'style'> & {
+    value?: Date;
+    onValueChange?: (value: Date) => void;
+    style?: StyledProp<TimeInputComposition>;
+    disabled?: boolean;
+    gap?: number;
+    field?: DateField<any>;
+    format?: string;
+    overlay?: boolean;
+    /**
+      * Defines the position where the calendar will be anchored relative to the input.
+    */
+    timePickerPosition?: 'left' | 'right';
+    /**
+      * If `true`, this calendar is part of a globally managed group.
+      * When one calendar in this group opens, all others with `autoClosePeersCalendars: true` will close.
+    */
+    autoClosePeersOverlays?: boolean;
+};

package/dist/components/TimeInput/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/components/TimeInput/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/TimeInput/types.ts"],"names":[],"mappings":""}

package/dist/components/components.d.ts

@@ -41,3 +41,4 @@ export * from './SortablePhotos';
 export * from './SectionFilters';
 export * from './Tabs';
 export * from './CalendarInput';
+export * from './TimeInput';

package/dist/components/components.js

@@ -41,4 +41,5 @@ export * from './SortablePhotos';
 export * from './SectionFilters';
 export * from './Tabs';
 export * from './CalendarInput';
+export * from './TimeInput';
 //# sourceMappingURL=components.js.map

package/dist/components/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sourceRoot":"","sources":["../../src/components/components.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,oBAAoB,CAAA;AAClC,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,qBAAqB,CAAA;AACnC,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,oBAAoB,CAAA;AAClC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,QAAQ,CAAA;AACtB,cAAc,kBAAkB,CAAA;AAChC,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,mBAAmB,CAAA;AACjC,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,QAAQ,CAAA;AACtB,cAAc,iBAAiB,CAAA"}
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../../src/components/components.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,oBAAoB,CAAA;AAClC,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,qBAAqB,CAAA;AACnC,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,oBAAoB,CAAA;AAClC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,QAAQ,CAAA;AACtB,cAAc,kBAAkB,CAAA;AAChC,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,mBAAmB,CAAA;AACjC,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,QAAQ,CAAA;AACtB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,aAAa,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "5.1.4",
+  "version": "5.2.0",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {
@@ -9,34 +9,33 @@
     "directory": "packages/mobile"
   },
   "devDependencies": {
-    "@codeleap/types": "5.1.4",
-    "@codeleap/utils": "5.1.4",
-    "@codeleap/hooks": "5.1.4",
-    "@codeleap/form": "5.1.4",
-    "@codeleap/query": "5.1.4",
-    "@codeleap/logger": "5.1.4",
-    "@codeleap/config": "5.1.4",
-    "@codeleap/modals": "5.1.4"
+    "@codeleap/types": "5.2.0",
+    "@codeleap/utils": "5.2.0",
+    "@codeleap/hooks": "5.2.0",
+    "@codeleap/form": "5.2.0",
+    "@codeleap/query": "5.2.0",
+    "@codeleap/logger": "5.2.0",
+    "@codeleap/config": "5.2.0",
+    "@codeleap/modals": "5.2.0"
   },
   "scripts": {
     "build": "tsc --build",
     "lint": "eslint -c  .eslintrc.js --fix \"./src/**/*.{ts,tsx,js,jsx}\""
   },
   "peerDependencies": {
-    "@codeleap/types": "5.1.4",
-    "@codeleap/utils": "5.1.4",
-    "@codeleap/hooks": "5.1.4",
-    "@codeleap/form": "5.1.4",
-    "@codeleap/query": "5.1.4",
-    "@codeleap/logger": "5.1.4",
-    "@codeleap/styles": "5.1.4",
-    "@codeleap/modals": "5.1.4",
+    "@codeleap/types": "5.2.0",
+    "@codeleap/utils": "5.2.0",
+    "@codeleap/hooks": "5.2.0",
+    "@codeleap/form": "5.2.0",
+    "@codeleap/query": "5.2.0",
+    "@codeleap/logger": "5.2.0",
+    "@codeleap/styles": "5.2.0",
+    "@codeleap/modals": "5.2.0",
     "@d11/react-native-fast-image": "8.9.2",
     "@react-native-firebase/messaging": "21.12.0",
-    "@react-navigation/bottom-tabs": "7.3.1",
-    "@react-navigation/core": "7.7.0",
-    "@react-navigation/native": "7.0.19",
-    "@react-navigation/native-stack": "7.3.1",
+    "@react-navigation/bottom-tabs": "7.3.10",
+    "@react-navigation/native": "7.1.6",
+    "@react-navigation/native-stack": "7.3.10",
     "react": "18.2.0",
     "react-native": "0.77.1",
     "react-native-calendars": "1.1310.0",

package/package.json.bak

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "5.1.4",
+  "version": "5.2.0",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {
@@ -33,10 +33,9 @@
     "@codeleap/modals": "workspace:*",
     "@d11/react-native-fast-image": "8.9.2",
     "@react-native-firebase/messaging": "21.12.0",
-    "@react-navigation/bottom-tabs": "7.3.1",
-    "@react-navigation/core": "7.7.0",
-    "@react-navigation/native": "7.0.19",
-    "@react-navigation/native-stack": "7.3.1",
+    "@react-navigation/bottom-tabs": "7.3.10",
+    "@react-navigation/native": "7.1.6",
+    "@react-navigation/native-stack": "7.3.10",
     "react": "18.2.0",
     "react-native": "0.77.1",
     "react-native-calendars": "1.1310.0",

package/src/components/CalendarInput/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react'
+import React, { useState } from 'react'
 import { AnyRecord, IJSX, StyledComponentProps, useCompositionStyles } from '@codeleap/styles'
 import { MobileStyleRegistry } from '../../Registry'
 import { useStylesFor } from '../../hooks'
@@ -8,46 +8,13 @@ import { Calendar } from '../Calendar'
 import { TextInput } from '../TextInput'
 import dayjs from 'dayjs'
 import Animated, { FadeOut, FadeIn } from 'react-native-reanimated'
-import { globalState } from '@codeleap/store'
-import { useBooleanToggle, useId } from '@codeleap/hooks'
 import { useInputBase } from '../InputBase'
 import { fields } from '@codeleap/form'
+import { useInputOverlay } from '../InputBase/useInputOverlay'
 
 export * from './styles'
 export * from './types'
 
-const calendarStore = globalState({})
-
-const useCalendar = (id: string, autoClosePeersCalendars: boolean) => {
-  if (!autoClosePeersCalendars) return useBooleanToggle(false)
-
-  const isOpen = calendarStore.use(state => state[id])
-
-  const toggle = useCallback(() => {
-    const isCurrentlyOpen = calendarStore.value[id]
-    const isAnyOtherOpen = Object.entries(calendarStore.value).some(
-      ([key, isOpen]) => key !== id && isOpen
-    )
-
-    const newValues = Object.keys(calendarStore.value).reduce((acc, key) => {
-      acc[key] = false
-      return acc
-    }, {} as Record<string, boolean>)
-
-    if (isAnyOtherOpen && !isCurrentlyOpen) {
-      calendarStore.set(newValues)
-
-      setTimeout(() => {
-        calendarStore.set({ [id]: true })
-      }, 100)
-    } else {
-      calendarStore.set({ ...newValues, [id]: !isCurrentlyOpen })
-    }
-  }, [])
-
-  return [isOpen, toggle]
-}
-
 export const CalendarInput = (props: CalendarInputProps) => {
   const {
     style,
@@ -68,8 +35,6 @@ export const CalendarInput = (props: CalendarInputProps) => {
     ...props
   }
 
-  const id = useId()
-
   const styles = useStylesFor(CalendarInput.styleRegistryName, style)
 
   const compositionStyles = useCompositionStyles(['calendar', 'input'], styles)
@@ -81,7 +46,7 @@ export const CalendarInput = (props: CalendarInputProps) => {
 
   const [inputHeight, setInputHeight] = useState(0)
 
-  const [isOpen, toggle] = useCalendar(id, autoClosePeersCalendars)
+  const [isOpen, toggle] = useInputOverlay(autoClosePeersCalendars)
 
   return (
     <View style={[styles.wrapper, { position: 'relative' }]}>
@@ -89,6 +54,7 @@ export const CalendarInput = (props: CalendarInputProps) => {
         placeholder='Select Date'
         disabled={disabled}
         {...textInputProps}
+        style={compositionStyles.input}
         leftIcon={!leftIcon ? null : {
           ...leftIcon,
           onPress: toggle,

package/src/components/InputBase/useInputOverlay.ts

@@ -0,0 +1,38 @@
+import { useBooleanToggle } from '@codeleap/hooks'
+import { globalState } from '@codeleap/store'
+import { useCallback } from 'react'
+import { useId } from '@codeleap/hooks'
+
+const inputOverlayStore = globalState({})
+
+export const useInputOverlay = (autoClosePeersOverlays: boolean, providedId?: string) => {
+  if (!autoClosePeersOverlays) return useBooleanToggle(false)
+
+  const id = useId(providedId)
+
+  const isOpen = inputOverlayStore.use(state => state[id])
+
+  const toggle = useCallback(() => {
+    const isCurrentlyOpen = inputOverlayStore.value[id]
+    const isAnyOtherOpen = Object.entries(inputOverlayStore.value).some(
+      ([key, isOpen]) => key !== id && isOpen
+    )
+
+    const newValues = Object.keys(inputOverlayStore.value).reduce((acc, key) => {
+      acc[key] = false
+      return acc
+    }, {} as Record<string, boolean>)
+
+    if (isAnyOtherOpen && !isCurrentlyOpen) {
+      inputOverlayStore.set(newValues)
+
+      setTimeout(() => {
+        inputOverlayStore.set({ [id]: true })
+      }, 100)
+    } else {
+      inputOverlayStore.set({ ...newValues, [id]: !isCurrentlyOpen })
+    }
+  }, [])
+
+  return [isOpen, toggle]
+}

package/src/components/TimeInput/index.tsx

@@ -0,0 +1,118 @@
+import React, { useState } from 'react'
+import { AnyRecord, IJSX, StyledComponentProps, useCompositionStyles } from '@codeleap/styles'
+import { TimeInputProps } from './types'
+import dayjs from 'dayjs'
+import Animated, { FadeOut, FadeIn } from 'react-native-reanimated'
+import { fields } from '@codeleap/form'
+import DatePicker from 'react-native-date-picker'
+import { useStylesFor } from '../../hooks'
+import { useInputBase } from '../InputBase'
+import { View } from '../View'
+import { TextInput } from '../TextInput'
+import { MobileStyleRegistry } from '../../Registry'
+import { useInputOverlay } from '../InputBase/useInputOverlay'
+
+export * from './styles'
+export * from './types'
+
+export const TimeInput = (props: TimeInputProps) => {
+  const {
+    style,
+    value,
+    onValueChange,
+    disabled,
+    gap,
+    timePickerPosition,
+    rightIcon,
+    leftIcon,
+    autoClosePeersOverlays,
+    field,
+    format,
+    overlay,
+    ...textInputProps
+  } = {
+    ...TimeInput.defaultProps,
+    ...props
+  }
+
+  const styles = useStylesFor(TimeInput.styleRegistryName, style)
+
+  const compositionStyles = useCompositionStyles(['input'], styles)
+
+  const {
+    inputValue,
+    onInputValueChange,
+  } = useInputBase<Date>(field, fields.date as any, { value, onValueChange })
+
+  const [inputHeight, setInputHeight] = useState(0)
+
+  const [isOpen, toggle] = useInputOverlay(autoClosePeersOverlays)
+
+  return (
+    <View style={[styles.wrapper, { position: 'relative' }]}>
+      <TextInput
+        placeholder='Select a time'
+        disabled={disabled}
+        {...textInputProps}
+        style={compositionStyles.input}
+        leftIcon={!leftIcon ? null : {
+          ...leftIcon,
+          onPress: toggle,
+        }}
+        rightIcon={!rightIcon ? null : {
+          ...rightIcon,
+          onPress: toggle,
+        }}
+        value={!inputValue ? '' : dayjs(inputValue).format(format)}
+        onValueChange={() => inputValue}
+        onPress={disabled ? null : toggle}
+        innerWrapperProps={{
+          rippleDisabled: true,
+        }}
+        focused={isOpen}
+        onLayout={(e) => setInputHeight(e.nativeEvent.layout.height)}
+      />
+
+      {!isOpen || disabled ? null : (
+        <Animated.View
+          exiting={FadeOut.duration(150)}
+          entering={FadeIn.duration(150)}
+          style={overlay ? {
+            position: 'absolute',
+            zIndex: 1,
+            [timePickerPosition]: 0,
+            top: inputHeight + gap,
+          } : {
+            marginTop: gap,
+          }}
+        >
+          <View style={styles.timePicker}>
+            <DatePicker
+              mode='time'
+              onDateChange={onInputValueChange}
+              date={inputValue ?? new Date()}
+            />
+          </View>
+        </Animated.View>
+      )}
+    </View>
+  )
+}
+
+TimeInput.styleRegistryName = 'TimeInput'
+TimeInput.elements = ['wrapper', 'timePicker', 'input']
+TimeInput.rootElement = 'wrapper'
+
+TimeInput.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return TimeInput as (props: StyledComponentProps<TimeInputProps, typeof styles>) => IJSX
+}
+
+TimeInput.defaultProps = {
+  gap: 8,
+  timerPickerPosition: 'left',
+  autoClosePeersCalendars: false,
+  format: 'hh:mm A',
+  overlay: true,
+} as Partial<TimeInputProps>
+
+MobileStyleRegistry.registerComponent(TimeInput)

package/src/components/TimeInput/styles.ts

@@ -0,0 +1,6 @@
+import { TextInputComposition } from '../TextInput'
+
+export type TimeInputComposition =
+  'wrapper' |
+  `input${Capitalize<TextInputComposition>}` |
+  'timePicker'

package/src/components/TimeInput/types.ts

@@ -0,0 +1,28 @@
+import { StyledProp } from '@codeleap/styles'
+import { TimeInputComposition } from './styles'
+import { DateField } from '@codeleap/form'
+import { TextInputProps } from '../TextInput'
+
+export type TimeInputProps =
+  Omit<TextInputProps, 'value' | 'onValueChange' | 'field' | 'style'> &
+  {
+    value?: Date
+    onValueChange?: (value: Date) => void
+    style?: StyledProp<TimeInputComposition>
+    disabled?: boolean
+    gap?: number
+    field?: DateField<any>
+    format?: string
+    overlay?: boolean
+
+    /**
+      * Defines the position where the calendar will be anchored relative to the input.
+    */
+    timePickerPosition?: 'left' | 'right'
+
+    /**
+      * If `true`, this calendar is part of a globally managed group.
+      * When one calendar in this group opens, all others with `autoClosePeersCalendars: true` will close.
+    */
+    autoClosePeersOverlays?: boolean
+  }

package/src/components/components.ts

@@ -40,4 +40,5 @@ export * from './PlacesAutocomplete'
 export * from './SortablePhotos'
 export * from './SectionFilters'
 export * from './Tabs'
-export * from './CalendarInput'
+export * from './CalendarInput'
+export * from './TimeInput'