@codeleap/mobile 5.0.13 → 5.1.0

package/dist/components/Tabs/index.js

@@ -0,0 +1,36 @@
+import { View } from '../View';
+import { TabsProvider } from './Context';
+import { Panel } from './Panel';
+import { Tab } from './Tab';
+import { TabList } from './TabList';
+import { MobileStyleRegistry } from '../../Registry';
+import { useStylesFor } from '../../hooks';
+export { useTabContext } from './Context';
+export * from './types';
+export * from './styles';
+export const Tabs = (props) => {
+    const { style, value, onValueChange, defaultValue, keepMounted, children, ...rest } = {
+        ...Tabs.defaultProps,
+        ...props,
+    };
+    const styles = useStylesFor(Tabs.styleRegistryName, style);
+    return <View {...rest} style={styles?.wrapper}>
+    <TabsProvider value={value} onValueChange={onValueChange} defaultValue={defaultValue} styles={styles} keepMounted={keepMounted}>
+      {children}
+    </TabsProvider>
+  </View>;
+};
+Tabs.Tab = Tab;
+Tabs.TabList = TabList;
+Tabs.Panel = Panel;
+Tabs.styleRegistryName = 'Tabs';
+Tabs.elements = ['wrapper', 'tab', 'panel'];
+Tabs.rootElement = 'wrapper';
+Tabs.withVariantTypes = (styles) => {
+    return Tabs;
+};
+Tabs.defaultProps = {
+    keepMounted: true,
+};
+MobileStyleRegistry.registerComponent(Tabs);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tabs/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAGnC,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAE1C,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AAEzC,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AAExB,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAgB,EAAE,EAAE;IACvC,MAAM,EACJ,KAAK,EACL,KAAK,EACL,aAAa,EACb,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,GAAG,IAAI,EACR,GAAG;QACF,GAAG,IAAI,CAAC,YAAY;QACpB,GAAG,KAAK;KACT,CAAA;IAED,MAAM,MAAM,GAAG,YAAY,CAAC,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAA;IAE1D,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,CAC5C;IAAA,CAAC,YAAY,CACX,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,WAAW,CAAC,CAAC,WAAW,CAAC,CAEzB;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,YAAY,CAChB;EAAA,EAAE,IAAI,CAAC,CAAA;AACT,CAAC,CAAA;AAED,IAAI,CAAC,GAAG,GAAG,GAAG,CAAA;AACd,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;AACtB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;AAElB,IAAI,CAAC,iBAAiB,GAAG,MAAM,CAAA;AAC/B,IAAI,CAAC,QAAQ,GAAG,CAAC,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC,CAAA;AAC3C,IAAI,CAAC,WAAW,GAAG,SAAS,CAAA;AAE5B,IAAI,CAAC,gBAAgB,GAAG,CAAsB,MAAS,EAAE,EAAE;IACzD,OAAO,IAIN,CAAA;AACH,CAAC,CAAA;AAED,IAAI,CAAC,YAAY,GAAG;IAClB,WAAW,EAAE,IAAI;CACI,CAAA;AAEvB,mBAAmB,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAA"}

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

@@ -0,0 +1,4 @@
+type TabStates = 'active' | 'disabled';
+type TabComposition = 'wrapper' | 'icon' | 'text';
+export type TabsComposition = 'wrapper' | 'panel' | 'tabList' | 'tabListContainer' | `tab${Capitalize<TabComposition>}` | `tab${Capitalize<TabComposition>}:${TabStates}`;
+export {};

package/dist/components/Tabs/styles.js

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

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

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

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

@@ -0,0 +1,20 @@
+import { ICSS, StyledProp } from '@codeleap/styles';
+import { ReactNode } from 'react';
+import { TabsComposition } from './styles';
+import { ViewProps } from '../View';
+export type TabsContextProps = {
+    defaultValue: string;
+    value?: string;
+    onValueChange?: (newValue: string) => void;
+    children?: ReactNode;
+    keepMounted?: boolean;
+};
+export type TabsProps = TabsContextProps & Omit<ViewProps, 'style'> & {
+    style?: StyledProp<TabsComposition>;
+};
+export type TabsStyles = Record<TabsComposition, ICSS>;
+export type TabPropsWithCtx<P> = P & {
+    active?: boolean;
+    setValue?: (value: string) => void;
+    styles: TabsStyles;
+};

package/dist/components/Tabs/types.js

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

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

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

package/dist/components/TextInput/index.js

@@ -17,7 +17,7 @@ export const TextInput = forwardRef((props, inputRef) => {
         ...props,
     };
     const { inputBaseProps, others, } = selectInputBaseProps(allProps);
-    const { debugName, visibilityToggle, masking, secure, field, onChangeMask, onPress, visibleIcon, hiddenIcon, style, autoAdjustSelection, selectionStart, forceError, multiline, ...textInputProps } = others;
+    const { debugName, visibilityToggle, masking, secure, field, onChangeMask, onPress, visibleIcon, hiddenIcon, style, autoAdjustSelection, selectionStart, forceError, multiline, onLayout, ...textInputProps } = others;
     const styles = useStylesFor(TextInput.styleRegistryName, style);
     const { validation, inputValue, onInputValueChange, innerInputRef, wrapperRef, isFocused, secureTextEntry, currentSelection, hasMultipleLines, hasValue, hasError, toggleSecureTextEntry, handleMaskChange, handleBlur, handleFocus, } = useTextInput(allProps);
     const InputElement = masking ? MaskedTextInput : NativeTextInput;
@@ -26,7 +26,7 @@ export const TextInput = forwardRef((props, inputRef) => {
     const partialStyles = useInputBasePartialStyles(styles, ['placeholder', 'selection'], {
         disabled: isDisabled,
         error: !!hasError,
-        focus: isFocused,
+        focus: isFocused || textInputProps?.focused,
     });
     const visibilityToggleProps = visibilityToggle ? {
         onPress: toggleSecureTextEntry,
@@ -49,7 +49,7 @@ export const TextInput = forwardRef((props, inputRef) => {
         editable: false,
         caretHidden: true,
     } : {};
-    return <InputBase {...inputBaseProps} ref={wrapperRef} innerWrapper={isPressable ? Touchable : undefined} debugName={debugName} error={hasError ? validation?.message || forceError : null} style={{
+    return <InputBase {...inputBaseProps} onLayout={onLayout} ref={wrapperRef} innerWrapper={isPressable ? Touchable : undefined} debugName={debugName} error={hasError ? validation?.message || forceError : null} style={{
             ...styles,
             innerWrapper: [
                 styles?.innerWrapper,
@@ -61,11 +61,11 @@ export const TextInput = forwardRef((props, inputRef) => {
             onPress,
             debugName,
             dismissKeyboard: false,
-        }} rightIcon={rightIcon} focused={isFocused} hasValue={hasValue}>
+        }} rightIcon={rightIcon} focused={isFocused || textInputProps?.focused} hasValue={hasValue}>
     <InputElement allowFontScaling={false} editable={!isPressable && !isDisabled} {...buttonModeProps} selection={autoAdjustSelection ? currentSelection : undefined} placeholderTextColor={partialStyles?.placeholder?.color} selectionColor={partialStyles?.selection?.color} secureTextEntry={secure && secureTextEntry} textAlignVertical={multiline ? 'top' : undefined} multiline={multiline} {...textInputProps} value={inputValue} onChangeText={onInputValueChange} onBlur={handleBlur} onFocus={handleFocus} style={[
             styles?.input,
             multiline && styles['input:multiline'],
-            isFocused && styles['input:focused'],
+            (isFocused || textInputProps?.focused) && styles['input:focused'],
             hasError && styles['input:error'],
             isDisabled && styles['input:disabled'],
             hasMultipleLines && styles['input:hasMultipleLines'],

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

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

package/dist/components/components.d.ts

@@ -39,3 +39,5 @@ export * from './PaginationIndicator';
 export * from './PlacesAutocomplete';
 export * from './SortablePhotos';
 export * from './SectionFilters';
+export * from './Tabs';
+export * from './CalendarInput';

package/dist/components/components.js

@@ -39,4 +39,6 @@ export * from './PaginationIndicator';
 export * from './PlacesAutocomplete';
 export * from './SortablePhotos';
 export * from './SectionFilters';
+export * from './Tabs';
+export * from './CalendarInput';
 //# 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"}
+{"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "5.0.13",
+  "version": "5.1.0",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {
@@ -9,28 +9,28 @@
     "directory": "packages/mobile"
   },
   "devDependencies": {
-    "@codeleap/types": "5.0.13",
-    "@codeleap/utils": "5.0.13",
-    "@codeleap/hooks": "5.0.13",
-    "@codeleap/form": "5.0.13",
-    "@codeleap/query": "5.0.13",
-    "@codeleap/logger": "5.0.13",
-    "@codeleap/config": "5.0.13",
-    "@codeleap/modals": "5.0.13"
+    "@codeleap/types": "5.1.0",
+    "@codeleap/utils": "5.1.0",
+    "@codeleap/hooks": "5.1.0",
+    "@codeleap/form": "5.1.0",
+    "@codeleap/query": "5.1.0",
+    "@codeleap/logger": "5.1.0",
+    "@codeleap/config": "5.1.0",
+    "@codeleap/modals": "5.1.0"
   },
   "scripts": {
     "build": "tsc --build",
     "lint": "eslint -c  .eslintrc.js --fix \"./src/**/*.{ts,tsx,js,jsx}\""
   },
   "peerDependencies": {
-    "@codeleap/types": "5.0.13",
-    "@codeleap/utils": "5.0.13",
-    "@codeleap/hooks": "5.0.13",
-    "@codeleap/form": "5.0.13",
-    "@codeleap/query": "5.0.13",
-    "@codeleap/logger": "5.0.13",
-    "@codeleap/styles": "5.0.13",
-    "@codeleap/modals": "5.0.13",
+    "@codeleap/types": "5.1.0",
+    "@codeleap/utils": "5.1.0",
+    "@codeleap/hooks": "5.1.0",
+    "@codeleap/form": "5.1.0",
+    "@codeleap/query": "5.1.0",
+    "@codeleap/logger": "5.1.0",
+    "@codeleap/styles": "5.1.0",
+    "@codeleap/modals": "5.1.0",
     "@d11/react-native-fast-image": "8.9.2",
     "@react-native-firebase/messaging": "21.12.0",
     "@react-navigation/bottom-tabs": "7.3.1",
@@ -38,7 +38,7 @@
     "@react-navigation/native-stack": "7.3.1",
     "react": "18.2.0",
     "react-native": "0.77.1",
-    "react-native-calendars": "1.1307.0",
+    "react-native-calendars": "1.1310.0",
     "react-native-date-picker": "5.0.10",
     "react-native-device-info": "14.0.4",
     "react-native-gesture-handler": "2.24.0",

package/package.json.bak

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "5.0.13",
+  "version": "5.1.0",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {
@@ -38,7 +38,7 @@
     "@react-navigation/native-stack": "7.3.1",
     "react": "18.2.0",
     "react-native": "0.77.1",
-    "react-native-calendars": "1.1307.0",
+    "react-native-calendars": "1.1310.0",
     "react-native-date-picker": "5.0.10",
     "react-native-device-info": "14.0.4",
     "react-native-gesture-handler": "2.24.0",

package/src/components/Calendar/index.tsx

@@ -1,67 +1,52 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import { TypeGuards } from '@codeleap/types'
-import dayjs from 'dayjs'
-// @ts-ignore
-import { Calendar as RNCalendar, CalendarProps as RNCalendarProps, DateData } from 'react-native-calendars'
-import { View, ViewProps } from '../View'
-import { CalendarComposition } from './types'
-import { AnyRecord, IJSX, StyledComponentProps, StyledProp } from '@codeleap/styles'
+import { Calendar as RNCalendar, DateData } from 'react-native-calendars'
+import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
 import { MobileStyleRegistry } from '../../Registry'
 import { useStylesFor } from '../../hooks'
+import { CalendarProps } from './types'
+import dayjs from 'dayjs'
 
-export type CalendarProps =
-  Omit<ViewProps, 'style'> &
-  {
-    onValueChange?: (date: Date | string) => any
-    value?: Date | string
-    calendarProps?: RNCalendarProps
-    style?: StyledProp<CalendarComposition>
-  }
-
+export * from './styles'
 export * from './types'
 
 export const Calendar = (props: CalendarProps) => {
   const {
     style,
-    calendarProps,
     value,
     onValueChange,
-    ...viewProps
+    ...calendarProps
   } = props
 
   const styles = useStylesFor(Calendar.styleRegistryName, style)
 
-  const isDateObject = TypeGuards.isInstance(value, Date)
-  const stringValue: string = isDateObject ? dayjs(value).format('YYYY/MM/DD') : value
+  const isDateValue = TypeGuards.isInstance(value, Date)
+  const stringValue = isDateValue ? dayjs(value).format('YYYY-MM-DD') : value ?? ''
 
-  function handleChange(date: DateData) {
-    if (!onValueChange) return
-    if (isDateObject) {
-      onValueChange(new Date(date.timestamp))
-    } else {
-      onValueChange(date.dateString)
-    }
-  }
+  const onChange = useCallback((date: DateData) => {
+    const newValue = isDateValue ? dayjs(date.dateString).toDate() : date.dateString
+    onValueChange?.(newValue)
+  }, [onValueChange])
 
-  return <View style={styles?.wrapper} {...viewProps}>
+  return (
     <RNCalendar
-      onDayPress={handleChange}
-      current={new Date(value).toISOString()}
+      onDayPress={onChange}
+      current={stringValue}
       monthFormat={'MMMM yyyy'}
-      markedDates={{
-        [stringValue]: { selected: true },
-      }}
+      {...calendarProps}
+      markedDates={{ [stringValue]: { selected: true }, ...calendarProps?.markedDates }}
+      style={styles?.wrapper}
+      headerStyle={styles?.header}
       theme={{
-        ...styles?.theme,
-        stylesheet: styles,
+        ...styles?.calendar,
+        ...calendarProps?.theme,
       }}
-      {...calendarProps}
     />
-  </View>
+  )
 }
 
 Calendar.styleRegistryName = 'Calendar'
-Calendar.elements = ['wrapper', 'theme', 'calendar', 'day', 'agenda', 'expandable', 'event', 'timeLabel', 'textDayStyle', 'dotStyle', 'arrowStyle', 'contentStyle', 'timelineContainer', 'line', 'verticalLine', 'nowIndicator']
+Calendar.elements = ['wrapper', 'header', 'calendar']
 Calendar.rootElement = 'wrapper'
 
 Calendar.withVariantTypes = <S extends AnyRecord>(styles: S) => {

package/src/components/Calendar/styles.ts

@@ -0,0 +1,5 @@
+import { Theme } from 'react-native-calendars/src/types'
+
+export type CalendarComposition = 'wrapper' | 'header' | 'calendar'
+
+export type CalendarThemeConfig = Theme

package/src/components/Calendar/types.ts

@@ -1,101 +1,11 @@
-import { FilterKeys, Paths } from '@codeleap/types'
-import { TextStyle, ViewStyle } from 'react-native'
-
-type CalendarTheme = {
-    timelineContainer?: object
-    contentStyle?: ViewStyle
-    event?: object
-    eventTitle?: object
-    eventSummary?: object
-    eventTimes?: object
-    line?: object
-    verticalLine?: object
-    nowIndicatorLine?: object
-    nowIndicatorKnob?: object
-    timeLabel?: object
-    todayTextColor?: string
-    calendarBackground?: string
-    indicatorColor?: string
-    textSectionTitleColor?: string
-    textSectionTitleDisabledColor?: string
-    dayTextColor?: string
-    selectedDayTextColor?: string
-    monthTextColor?: string
-    selectedDayBackgroundColor?: string
-    arrowColor?: string
-    textDisabledColor?: string
-    textInactiveColor?: string
-    backgroundColor?: string //TODO: remove in V2
-    dotColor?: string
-    selectedDotColor?: string
-    disabledArrowColor?: string
-    textDayFontFamily?: TextStyle['fontFamily']
-    textMonthFontFamily?: TextStyle['fontFamily']
-    textDayHeaderFontFamily?: TextStyle['fontFamily']
-    textDayFontWeight?: TextStyle['fontWeight']
-    textMonthFontWeight?: TextStyle['fontWeight']
-    textDayHeaderFontWeight?: TextStyle['fontWeight']
-    textDayFontSize?: number
-    textMonthFontSize?: number
-    textDayHeaderFontSize?: number
-    agendaDayTextColor?: string
-    agendaDayNumColor?: string
-    agendaTodayColor?: string
-    agendaKnobColor?: string
-    todayButtonFontFamily?: TextStyle['fontFamily']
-    todayButtonFontWeight?: TextStyle['fontWeight']
-    todayButtonFontSize?: number
-    textDayStyle?: TextStyle
-    dotStyle?: object
-    arrowStyle?: ViewStyle
-    todayBackgroundColor?: string
-    disabledDotColor?: string
-    inactiveDotColor?: string
-    todayDotColor?: string
-    todayButtonTextColor?: string
-    todayButtonPosition?: string
-    arrowHeight?: number
-    arrowWidth?: number
-    weekVerticalMargin?: number
-    stylesheet?: {
-      calendar?: {
-        main?: object
-        header?: object
-      }
-      day?: {
-        basic?: object
-        period?: object
-      }
-      dot?: object
-      marking?: object
-      'calendar-list'?: {
-        main?: object
-      }
-      agenda?: {
-        main?: object
-        list?: object
-      }
-      expandable?: {
-        main?: object
-      }
-    }
-  }
-
-type FlatStyleKeys = 'dot' | 'marking'
-
-type StyleSheetKeys = Exclude<keyof CalendarTheme['stylesheet'], FlatStyleKeys>
-
-type ThemeObjPrimitiveKeys = FilterKeys<CalendarTheme, string|number>
-
-type ThemeObjCompositionKeys = Exclude<keyof CalendarTheme, ThemeObjPrimitiveKeys | 'stylesheet'>
-
-type StyleSheetObjKeys = Exclude<Paths<CalendarTheme['stylesheet']>, StyleSheetKeys>
-
-export type CalendarStyleGen<TCSS = any> = {
-    theme?: Partial<{
-        [P in ThemeObjPrimitiveKeys]: CalendarTheme[P]
-    }>
-} & Partial<Record<StyleSheetObjKeys | 'wrapper' | ThemeObjCompositionKeys, TCSS>>
-
-export type CalendarComposition = keyof CalendarStyleGen
-export type TCalendarStyles = CalendarStyleGen<any>
+import { StyledProp } from '@codeleap/styles'
+import { CalendarProps as RNCalendarProps } from 'react-native-calendars'
+import { CalendarComposition } from './styles'
+
+export type CalendarProps =
+  Omit<RNCalendarProps, 'style'> &
+  {
+    onValueChange: (date: Date | string) => void
+    value: Date | string
+    style?: StyledProp<CalendarComposition>
+  }

package/src/components/CalendarInput/index.tsx

@@ -0,0 +1,150 @@
+import React, { useCallback, useState } from 'react'
+import { AnyRecord, IJSX, StyledComponentProps, useCompositionStyles } from '@codeleap/styles'
+import { MobileStyleRegistry } from '../../Registry'
+import { useStylesFor } from '../../hooks'
+import { CalendarInputProps } from './types'
+import { View } from '../View'
+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'
+
+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,
+    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<Date | string>(field, fields.date as any, { value, onValueChange })
+
+  const [inputHeight, setInputHeight] = useState(0)
+
+  const [isOpen, toggle] = useCalendar(id, autoClosePeersCalendars)
+
+  return (
+    <View style={[styles.wrapper, { position: 'relative' }]}>
+      <TextInput
+        placeholder='Select Date'
+        disabled={disabled}
+        {...textInputProps}
+        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,
+            [calendarPosition]: 0,
+            top: inputHeight + gap,
+          } : {
+            marginTop: gap,
+          }}
+        >
+          <Calendar
+            style={compositionStyles.calendar}
+            value={inputValue}
+            onValueChange={onInputValueChange}
+          />
+        </Animated.View>
+      )}
+    </View>
+  )
+}
+
+CalendarInput.styleRegistryName = 'CalendarInput'
+CalendarInput.elements = ['wrapper', 'calendar', 'input']
+CalendarInput.rootElement = 'wrapper'
+
+CalendarInput.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return CalendarInput as (props: StyledComponentProps<CalendarInputProps, typeof styles>) => IJSX
+}
+
+CalendarInput.defaultProps = {
+  gap: 8,
+  calendarPosition: 'left',
+  autoClosePeersCalendars: false,
+  format: 'DD/MM/YYYY',
+  overlay: true,
+} as Partial<CalendarInputProps>
+
+MobileStyleRegistry.registerComponent(CalendarInput)

package/src/components/CalendarInput/styles.ts

@@ -0,0 +1,7 @@
+import { TextInputComposition } from '../TextInput'
+import { CalendarComposition } from '../Calendar'
+
+export type CalendarInputComposition =
+  'wrapper' |
+  `input${Capitalize<TextInputComposition>}` |
+  `calendar${Capitalize<CalendarComposition>}`

package/src/components/CalendarInput/types.ts

@@ -0,0 +1,29 @@
+import { StyledProp } from '@codeleap/styles'
+import { CalendarInputComposition } from './styles'
+import { CalendarProps } from '../Calendar'
+import { TextInputProps } from '../TextInput'
+import { DateField } from '@codeleap/form'
+
+export type CalendarInputProps =
+  Omit<TextInputProps, 'value' | 'onValueChange' | 'field' | 'style'> &
+  {
+    value?: CalendarProps['value']
+    onValueChange?: CalendarProps['onValueChange']
+    style?: StyledProp<CalendarInputComposition>
+    disabled?: boolean
+    gap?: number
+    field?: DateField<any>
+    format?: string
+    overlay?: boolean
+
+    /**
+      * Defines the position where the calendar will be anchored relative to the input.
+    */
+    calendarPosition?: '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.
+    */
+    autoClosePeersCalendars?: boolean
+  }