@codeleap/mobile 2.3.0 → 2.3.1

package/dist/components/List/styles.js

@@ -20,7 +20,7 @@ exports.ListStyles = {
         var defaultStyles = styles_1.ScrollStyles.default(theme);
         return __assign(__assign({}, defaultStyles), { separator: {
                 width: '100%',
-                height: theme.spacing.value(1.5),
+                height: theme.spacing.value(1),
             } });
     }),
 };

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/List/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,2CAA8D;AAC9D,2CAAkE;AAIlE,IAAM,eAAe,GAAG,IAAA,oCAA2B,GAAmB,CAAA;AAEzD,QAAA,UAAU,GAAG;IACxB,OAAO,EAAE,eAAe,CAAC,UAAC,KAAK;QAC7B,IAAM,aAAa,GAAG,qBAAY,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;QACjD,6BACK,aAAa,KAChB,SAAS,EAAE;gBACT,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC;aACjC,IACF;IACH,CAAC,CAAC;CACH,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/List/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,2CAA8D;AAC9D,2CAAkE;AAIlE,IAAM,eAAe,GAAG,IAAA,oCAA2B,GAAmB,CAAA;AAEzD,QAAA,UAAU,GAAG;IACxB,OAAO,EAAE,eAAe,CAAC,UAAC,KAAK;QAC7B,IAAM,aAAa,GAAG,qBAAY,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;QACjD,6BACK,aAAa,KAChB,SAAS,EAAE;gBACT,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;aAC/B,IACF;IACH,CAAC,CAAC;CACH,CAAA"}

package/dist/utils/theme.d.ts

@@ -5,6 +5,7 @@ declare type AppValues = {
 export declare function getMobileThemeValues(initialWindowMetrics: any, values: AppValues): {
     pixel: number;
     hasNotch: boolean;
+    hasIsland: boolean;
     prefersConstantNavigationBar: boolean;
     safeAreaTop: number;
     safeAreaBottom: number;

package/dist/utils/theme.js

@@ -10,18 +10,23 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getMobileThemeValues = void 0;
 var react_native_1 = require("react-native");
+var react_native_device_info_1 = __importDefault(require("react-native-device-info"));
 function getMobileThemeValues(initialWindowMetrics, values) {
     var _a, _b;
     var screenDimensions = react_native_1.Dimensions.get('screen');
     var hasNotch = react_native_1.Platform.OS === 'ios' ? (react_native_1.Dimensions.get('window').height >= 812) : (((_a = initialWindowMetrics === null || initialWindowMetrics === void 0 ? void 0 : initialWindowMetrics.insets) === null || _a === void 0 ? void 0 : _a.top) > 24 || react_native_1.StatusBar.currentHeight > 24);
+    var hasIsland = react_native_device_info_1.default.hasDynamicIsland();
     var bottomNavHeight = react_native_1.Platform.OS === 'android' ? (_b = initialWindowMetrics === null || initialWindowMetrics === void 0 ? void 0 : initialWindowMetrics.insets) === null || _b === void 0 ? void 0 : _b.bottom : 0;
     var prefersConstantNavigationBar = bottomNavHeight > 0;
-    var safeAreaTop = react_native_1.Platform.OS === 'ios' ? (hasNotch ? 34 : 20) : react_native_1.StatusBar.currentHeight;
+    var safeAreaTop = react_native_1.Platform.OS === 'ios' ? (hasNotch ? 34 + (hasIsland ? 12 : 0) : 20) : react_native_1.StatusBar.currentHeight;
     var safeAreaBottom = (hasNotch && !prefersConstantNavigationBar ? 20 : 0);
-    return __assign(__assign({}, screenDimensions), { pixel: react_native_1.StyleSheet.hairlineWidth, hasNotch: hasNotch, prefersConstantNavigationBar: prefersConstantNavigationBar, safeAreaTop: safeAreaTop, safeAreaBottom: safeAreaBottom, keyboardVerticalOffset: react_native_1.Platform.OS === 'ios' ? 57 : 47, get headerHeight() { return values.headerHeight + safeAreaTop; },
+    return __assign(__assign({}, screenDimensions), { pixel: react_native_1.StyleSheet.hairlineWidth, hasNotch: hasNotch, hasIsland: hasIsland, prefersConstantNavigationBar: prefersConstantNavigationBar, safeAreaTop: safeAreaTop, safeAreaBottom: safeAreaBottom, keyboardVerticalOffset: react_native_1.Platform.OS === 'ios' ? 57 : 47, get headerHeight() { return values.headerHeight + safeAreaTop; },
         get tabBarHeight() { return values.tabBarHeight + (prefersConstantNavigationBar ? 0 : this.safeAreaBottom); }, bottomNavHeight: bottomNavHeight, get window() {
             return {
                 height: screenDimensions.height - (bottomNavHeight + safeAreaTop),

package/dist/utils/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,6CAA0E;AAO1E,SAAgB,oBAAoB,CAAC,oBAAoB,EAAE,MAAiB;;IAC1E,IAAM,gBAAgB,GAAG,yBAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;IAEjD,IAAM,QAAQ,GAAG,uBAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,yBAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,MAAM,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA,MAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,MAAM,0CAAE,GAAG,IAAG,EAAE,IAAI,wBAAS,CAAC,aAAa,GAAG,EAAE,CAAC,CAAA;IAC5J,IAAM,eAAe,GAAG,uBAAQ,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC,CAAC,MAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,MAAM,0CAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAA;IAE5F,IAAM,4BAA4B,GAAG,eAAe,GAAG,CAAC,CAAA;IAExD,IAAM,WAAW,GAAG,uBAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,wBAAS,CAAC,aAAa,CAAA;IAE1F,IAAM,cAAc,GAAG,CAAC,QAAQ,IAAI,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAC3E,6BACK,gBAAgB,KAEnB,KAAK,EAAE,yBAAU,CAAC,aAAa,EAC/B,QAAQ,UAAA,EACR,4BAA4B,8BAAA,EAC5B,WAAW,aAAA,EACX,cAAc,gBAAA,EACd,sBAAsB,EAAE,uBAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EACvD,IAAI,YAAY,KAAK,OAAO,MAAM,CAAC,YAAY,GAAG,WAAW,CAAA,CAAC,CAAC;QAC/D,IAAI,YAAY,KAAK,OAAO,MAAM,CAAC,YAAY,GAAG,CAAC,4BAA4B,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA,CAAC,CAAC,EAC5G,eAAe,iBAAA,EACf,IAAI,MAAM;YACR,OAAO;gBACL,MAAM,EAAE,gBAAgB,CAAC,MAAM,GAAG,CAAC,eAAe,GAAG,WAAW,CAAC;gBACjE,KAAK,EAAE,gBAAgB,CAAC,KAAK;aAC9B,CAAA;QACH,CAAC,EACD,WAAW,EAAE;YACX,KAAK,EAAE;gBACL,QAAQ,EAAE,GAAG;gBACb,IAAI,EAAE,QAAQ;aACf;SACF,EACD,OAAO,EAAE;YACP,KAAK,EAAE;gBACL,MAAM,EAAE,EAAE;aACX;YACD,OAAO,EAAE;gBACP,MAAM,EAAE,EAAE;aACX;YACD,KAAK,EAAE;gBACL,MAAM,EAAE,EAAE;aACX;SACF,IACF;AACH,CAAC;AA/CD,oDA+CC"}
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,6CAA0E;AAC1E,sFAAiD;AAOjD,SAAgB,oBAAoB,CAAC,oBAAoB,EAAE,MAAiB;;IAC1E,IAAM,gBAAgB,GAAG,yBAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;IAEjD,IAAM,QAAQ,GAAG,uBAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,yBAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,MAAM,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA,MAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,MAAM,0CAAE,GAAG,IAAG,EAAE,IAAI,wBAAS,CAAC,aAAa,GAAG,EAAE,CAAC,CAAA;IAC5J,IAAM,SAAS,GAAG,kCAAU,CAAC,gBAAgB,EAAE,CAAA;IAC/C,IAAM,eAAe,GAAG,uBAAQ,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC,CAAC,MAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,MAAM,0CAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAA;IAE5F,IAAM,4BAA4B,GAAG,eAAe,GAAG,CAAC,CAAA;IAExD,IAAM,WAAW,GAAG,uBAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,wBAAS,CAAC,aAAa,CAAA;IAEjH,IAAM,cAAc,GAAG,CAAC,QAAQ,IAAI,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAC3E,6BACK,gBAAgB,KAEnB,KAAK,EAAE,yBAAU,CAAC,aAAa,EAC/B,QAAQ,UAAA,EACR,SAAS,WAAA,EACT,4BAA4B,8BAAA,EAC5B,WAAW,aAAA,EACX,cAAc,gBAAA,EACd,sBAAsB,EAAE,uBAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EACvD,IAAI,YAAY,KAAK,OAAO,MAAM,CAAC,YAAY,GAAG,WAAW,CAAA,CAAC,CAAC;QAC/D,IAAI,YAAY,KAAK,OAAO,MAAM,CAAC,YAAY,GAAG,CAAC,4BAA4B,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA,CAAC,CAAC,EAC5G,eAAe,iBAAA,EACf,IAAI,MAAM;YACR,OAAO;gBACL,MAAM,EAAE,gBAAgB,CAAC,MAAM,GAAG,CAAC,eAAe,GAAG,WAAW,CAAC;gBACjE,KAAK,EAAE,gBAAgB,CAAC,KAAK;aAC9B,CAAA;QACH,CAAC,EACD,WAAW,EAAE;YACX,KAAK,EAAE;gBACL,QAAQ,EAAE,GAAG;gBACb,IAAI,EAAE,QAAQ;aACf;SACF,EACD,OAAO,EAAE;YACP,KAAK,EAAE;gBACL,MAAM,EAAE,EAAE;aACX;YACD,OAAO,EAAE;gBACP,MAAM,EAAE,EAAE;aACX;YACD,KAAK,EAAE;gBACL,MAAM,EAAE,EAAE;aACX;SACF,IACF;AACH,CAAC;AAjDD,oDAiDC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {

package/src/components/ActionIcon/index.tsx

@@ -0,0 +1,32 @@
+import { ComponentVariants, getNestedStylesByKey, useDefaultComponentStyle } from '@codeleap/common'
+import React from 'react'
+import { StyleSheet } from 'react-native'
+import { StylesOf } from '../../types'
+import { Icon, IconProps } from '../Icon'
+import { Touchable, TouchableProps } from '../Touchable'
+import { ActionIconComposition, ActionIconStyles } from './styles'
+
+export type ActionIconProps= {
+    iconProps?: Partial<IconProps>
+    icon?: IconProps['name']
+    styles?: StylesOf<ActionIconComposition>
+} & Omit<TouchableProps, 'styles' | 'variants'> & ComponentVariants<typeof ActionIconStyles>
+
+export const ActionIcon:React.FC<ActionIconProps> = (props) => {
+  const { icon, iconProps, variants, styles, children, ...touchableProps } = props
+  const variantStyles = useDefaultComponentStyle<'u:ActionIcon', typeof ActionIconStyles>('u:ActionIcon', {
+    variants, styles, transform: StyleSheet.flatten,
+  })
+  const touchableStyles = getNestedStylesByKey('touchable', variantStyles)
+
+  return <Touchable styles={touchableStyles} {...touchableProps}>
+    <Icon name={icon} style={
+      [
+        variantStyles.icon,
+        touchableProps?.disabled && variantStyles['icon:disabled'],
+      ]} {...iconProps}/>
+    {children}
+  </Touchable>
+}
+
+export * from './styles'

package/src/components/ActionIcon/styles.ts

@@ -0,0 +1,97 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { TouchableComposition } from '../Touchable'
+
+export type ActionIconParts = 'icon' | `touchable${Capitalize<TouchableComposition>}`
+export type ActionIconStates = ':disabled' | ''
+export type ActionIconComposition = `${ActionIconParts}${ActionIconStates}`
+const createActionIconStyle = createDefaultVariantFactory<ActionIconComposition>()
+
+const presets = includePresets((style) => createActionIconStyle(() => ({ touchableWrapper: style })))
+
+export const ActionIconStyles = {
+  ...presets,
+  default: createActionIconStyle((theme) => {
+
+    return {
+      icon: {
+        color: theme.colors.icon,
+        ...theme.sized(5 * 0.6),
+
+      },
+      touchableWrapper: {
+        ...theme.sized(5),
+        borderRadius: theme.borderRadius.round,
+        ...theme.presets.center,
+      },
+      'icon:disabled': {
+        color: theme.colors.disabled,
+      },
+
+    }
+  }),
+  originalColor: createActionIconStyle(theme => ({
+    icon: {
+      color: 'auto',
+    },
+  })),
+  small: createActionIconStyle((theme) => ({
+    touchableWrapper: {
+      ...theme.sized(3.5),
+
+    },
+    icon: {
+      ...theme.sized(3.5 * 0.6),
+
+    },
+  })),
+  large: createActionIconStyle((theme) => ({
+    touchableWrapper: {
+      ...theme.sized(6.5),
+
+    },
+    icon: {
+      ...theme.sized(6.5 * 0.6),
+
+    },
+  })),
+  primary: createActionIconStyle((theme) => ({
+    icon: {
+      color: theme.colors.primary,
+
+    },
+
+  })),
+  negative: createActionIconStyle((theme) => ({
+    icon: {
+      color: theme.colors.negative,
+
+    },
+
+  })),
+  positive: createActionIconStyle((theme) => ({
+    icon: {
+      color: theme.colors.positive,
+
+    },
+
+  })),
+  black: createActionIconStyle((theme) => ({
+    icon: {
+      color: theme.colors.black,
+
+    },
+
+  })),
+  white: createActionIconStyle((theme) => ({
+    icon: {
+      color: theme.colors.white,
+
+    },
+
+  })),
+  neutral: createActionIconStyle((theme) => ({
+    icon: {
+      color: theme.colors.neutral,
+    },
+  })),
+}

package/src/components/ActivityIndicator/index.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react'
+import { ComponentPropsWithoutRef, forwardRef } from 'react'
+import { ActivityIndicator as Indicator, StyleSheet } from 'react-native'
+import {
+
+  useDefaultComponentStyle,
+  ComponentVariants,
+  useCodeleapContext,
+} from '@codeleap/common'
+import { StylesOf } from '../../types'
+import {
+  ActivityIndicatorComposition,
+  ActivityIndicatorStyles,
+} from './styles'
+
+export * from './styles'
+export type ActivityIndicatorProps = ComponentPropsWithoutRef<
+  typeof Indicator
+> & {
+  variants?: ComponentVariants<typeof ActivityIndicatorStyles>['variants']
+  styles?: StylesOf<ActivityIndicatorComposition>
+}
+
+export const ActivityIndicator = forwardRef<Indicator, ActivityIndicatorProps>(
+  (activityIndicatorProps, ref) => {
+    const { variants = [], style, styles: propStyles, ...props } = activityIndicatorProps
+
+    const variantStyles = useDefaultComponentStyle('ActivityIndicator', {
+      variants,
+      transform: StyleSheet.flatten,
+      styles: propStyles,
+    })
+
+    const { Theme } = useCodeleapContext()
+
+    const styles = StyleSheet.flatten([variantStyles.wrapper, style])
+    const color = styles?.color || Theme.colors.gray
+    const size = styles?.height || styles?.width || 'large'
+
+    return (
+      <Indicator
+        size={size}
+        ref={ref}
+        color={color}
+        style={styles}
+        {...props}
+      />
+    )
+  },
+)

package/src/components/ActivityIndicator/styles.ts

@@ -0,0 +1,68 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
+export type ActivityIndicatorComposition =
+  | 'wrapper'
+  | 'backCircle'
+  | 'frontCircle'
+  | 'circle'
+
+const createActivityIndicatorStyle =
+  createDefaultVariantFactory<ActivityIndicatorComposition>()
+
+const presets = includePresets((styles) => createActivityIndicatorStyle(() => ({ wrapper: styles })),
+)
+
+export const getActivityIndicatorBaseStyles = (size:number) => {
+  const sizes = {
+    height: size,
+    width: size,
+    borderWidth: size * 0.25,
+  }
+
+  return {
+    wrapper: {
+      position: 'relative',
+      ...sizes,
+    } as any,
+    circle: {
+      borderRadius: 100,
+      position: 'absolute',
+      borderStyle: 'solid',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+    } as any,
+    backCircle: {
+
+      // borderColor: theme.colors.primary,
+      minWidth: '100%',
+      opacity: 0.5,
+    } as any,
+    frontCircle: {
+      position: 'absolute',
+      borderColor: 'transparent',
+      // borderTopColor: theme.colors.primary,
+    } as any,
+  }
+}
+
+export const ActivityIndicatorStyles = {
+  ...presets,
+  default: createActivityIndicatorStyle((theme) => {
+    const baseStyles = getActivityIndicatorBaseStyles(35)
+
+    return {
+      ...baseStyles,
+      backCircle: {
+        ...baseStyles.backCircle,
+        borderColor: theme.colors.primary,
+      },
+      frontCircle: {
+        ...baseStyles.frontCircle,
+        borderTopColor: theme.colors.primary,
+      },
+    }
+
+  }),
+}

package/src/components/Animated.tsx

@@ -0,0 +1,34 @@
+import { onUpdate } from '@codeleap/common'
+import React, { useRef } from 'react'
+
+import posed from 'react-native-pose'
+import { Touchable } from './Touchable'
+import { View } from './View'
+const Components = {
+  Touchable,
+  View,
+}
+
+const PosedComponents = Object.fromEntries(
+  Object.entries(Components).map(([key, Render]) => [key, posed(Render)]),
+)
+
+type AnimatedComponents = typeof Components
+type CP = keyof AnimatedComponents
+
+type AnimatedProps<T extends CP, CFG = Record<string, any>> = {
+  component: T
+  config: CFG
+  pose: keyof CFG
+  initialPose?: keyof CFG
+} & Omit<Parameters<AnimatedComponents[T]>[0], 'component'>
+
+export const Animated = <T extends CP, CFG = any>({
+  config,
+  component,
+  ...props
+}: AnimatedProps<T, CFG>) => {
+  const Component = useRef(PosedComponents[component](config)).current
+
+  return <Component withParent={false} {...props} />
+}

package/src/components/AutoComplete/index.tsx

@@ -0,0 +1,163 @@
+import * as React from 'react'
+import { ComponentVariants,
+  FormTypes,
+  getNestedStylesByKey,
+  IconPlaceholder,
+  onUpdate,
+  PropsOf,
+  ReactStateProps,
+  TypeGuards,
+  useDebounce,
+  useDefaultComponentStyle,
+  useMemo,
+  useState,
+} from '@codeleap/common'
+import { ModalHeaderProps } from '../Modal'
+import { TextInput, TextInputProps } from '../TextInput'
+import { View, ViewProps } from '../View'
+import { CustomSelectProps, Select } from '../Select'
+import { AutoCompleteStyles, AutoCompleteComposition } from './styles'
+import { StylesOf } from '../../types'
+import { StyleSheet } from 'react-native'
+import { Text } from '../Text'
+import { Button } from '../Button'
+
+export type AutoCompleteHeaderProps = ReactStateProps<'search', string> &
+  Omit<PropsOf<typeof View>, 'style'|'styles'|'variants'>
+& {
+    label: FormTypes.Label
+    searchInputProps?: Partial<TextInputProps>
+    styles: ModalHeaderProps['styles'] & { searchInput?: TextInputProps['styles']; titleWrapper?:ViewProps['style']}
+    debugName: string
+    icon?: IconPlaceholder
+    toggle: ModalHeaderProps['toggle']
+  }
+
+export const AutoCompleteHeader:React.FC<AutoCompleteHeaderProps> = (props) => {
+  const { search, setSearch, icon = 'search', debugName, label, styles, toggle, searchInputProps, ...viewProps } = props
+
+  return <View style={[styles.wrapper]} {...viewProps}>
+    <View style={styles.titleWrapper}>
+      <Text style={styles.title} text={label}/>
+      <Button
+        icon={'close' as IconPlaceholder}
+        debugName={`Close Autocomplete ${debugName} button`}
+        onPress={toggle} variants={['icon']}
+        styles={styles.closeButton}/>
+    </View>
+    <TextInput subtitle={() => null} leftIcon={{
+      icon: icon as IconPlaceholder,
+    }} debugName={`AutoComplete ${debugName} search input`} value={search} onChangeText={setSearch} styles={styles.searchInput} {...searchInputProps}/>
+  </View>
+}
+
+export type AutoCompleteOption<T> = CustomSelectProps<T>['options'][number] & {searchTerm?: string}
+
+export type AutoCompleteProps<
+    T,
+    Base extends CustomSelectProps<T> = CustomSelectProps<T>
+  > = Omit<Base, 'options'| 'variants' | 'styles'> & {
+    options: AutoCompleteOption<T>[]
+    caseSensitive?: boolean
+    debounce?: number
+    headerProps?: Partial<AutoCompleteHeaderProps>
+    styles?: StylesOf<AutoCompleteComposition>
+    filterFn?: (search?: string, option?:AutoCompleteOption<T>) => boolean
+  } & ComponentVariants<typeof AutoCompleteStyles>
+
+export const AutoComplete = <T extends string|number = string>(props: AutoCompleteProps<T>) => {
+  const {
+    options,
+    caseSensitive = false,
+    debounce = 200,
+    filterFn,
+    headerProps = {},
+    variants,
+    styles,
+    ...selectProps
+  } = props
+
+  const [search, setSearch] = useState('')
+  const [debouncedSearch, resetDebounce] = useDebounce(search, debounce)
+  const [filteredOptions, setFilteredOptions] = useState(options)
+
+  const [loading, setLoading] = useState(false)
+  const variantStyles = useDefaultComponentStyle<'u:AutoComplete', typeof AutoCompleteStyles>('u:AutoComplete', {
+    variants,
+    transform: StyleSheet.flatten,
+    styles,
+  })
+  const serialVariants = JSON.stringify(variantStyles)
+  const { searchInputStyles, closeButtonStyles } = useMemo(() => ({
+    searchInputStyles: getNestedStylesByKey('searchInput', variantStyles),
+    closeButtonStyles: getNestedStylesByKey('closeButton', variantStyles),
+
+  }), [serialVariants])
+
+  onUpdate(() => {
+    setLoading(true)
+    let persist = true
+    setTimeout(() => {
+
+      const newOpts = options.filter((option) => {
+        if (filterFn) {
+          return filterFn(debouncedSearch, option)
+        }
+        const { label, searchTerm, value } = option
+        let term = searchTerm || (TypeGuards.isString(label) ? label : value.toString())
+
+        if (!caseSensitive) {
+          term = term.toLowerCase()
+        }
+
+        return term.includes(debouncedSearch.toLowerCase())
+      })
+      if (persist) {
+        setFilteredOptions(newOpts)
+        setTimeout(() => {
+          if (persist) {
+            setLoading(false)
+          }
+        }, debounce * 1.5)
+      }
+
+    })
+    return () => {
+      persist = false
+      resetDebounce()
+    }
+  }, [debouncedSearch, caseSensitive, options.length, filterFn])
+  return <Select
+    styles={variantStyles}
+    options={ loading ? [] : filteredOptions}
+    header={
+      <AutoCompleteHeader
+        debugName={selectProps.debugName}
+        label={selectProps.label}
+        search={search}
+        setSearch={setSearch}
+        toggle={selectProps.toggle}
+        styles={{
+          wrapper: variantStyles.header,
+          closeButton: closeButtonStyles,
+          title: variantStyles.title,
+          searchInput: searchInputStyles,
+          titleWrapper: variantStyles.titleWrapper,
+        }}
+
+        {...headerProps}
+      />
+    }
+
+    {...selectProps}
+    listProps={{
+      ...selectProps?.listProps,
+      placeholder: {
+        loading,
+        ...selectProps?.listProps?.placeholder,
+      },
+    }}
+  />
+
+}
+export * from './styles'

package/src/components/AutoComplete/styles.ts

@@ -0,0 +1,44 @@
+import { assignTextStyle, createDefaultVariantFactory } from '@codeleap/common'
+import { SelectComposition, SelectStyles } from '../Select'
+import { TextInputComposition } from '../TextInput'
+
+export type AutoCompleteComposition = SelectComposition | `searchInput${Capitalize<TextInputComposition>}` | 'titleWrapper'
+
+const createAutoCompleteStyle = createDefaultVariantFactory<AutoCompleteComposition>()
+
+export const AutoCompleteStyles = {
+  ...SelectStyles,
+  default: createAutoCompleteStyle((theme) => {
+    const defaultStyle = SelectStyles.default(theme)
+
+    return {
+      ...defaultStyle,
+      header: {
+        ...theme.spacing.paddingHorizontal(2),
+        ...theme.spacing.paddingTop(1),
+        ...theme.presets.column,
+        ...theme.presets.alignStart,
+      },
+
+      searchInputWrapper: {
+        ...theme.presets.fullWidth,
+        ...theme.spacing.marginTop(2),
+      },
+
+      titleWrapper: {
+        ...theme.presets.row,
+        ...theme.presets.alignCenter,
+        ...theme.presets.fullWidth,
+        ...theme.presets.justifyCenter,
+      },
+      title: {
+        ...theme.presets.textCenter,
+        flex: 1,
+      },
+      closeButtonWrapper: {
+        position: 'absolute',
+        right: 0,
+      },
+    }
+  }),
+}

package/src/components/Backdrop/index.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { ComponentVariants, onUpdate, PropsOf, useDefaultComponentStyle } from '@codeleap/common'
+import { useDynamicAnimation } from 'moti'
+import { Touchable } from '../Touchable'
+import { View } from '../View'
+
+import { StylesOf } from '../../types/utility'
+import { StyleSheet } from 'react-native'
+import { useStaticAnimationStyles } from '../../utils'
+import { BackdropComposition, BackdropStyles } from './styles'
+
+export * from './styles'
+export type BackdropProps = PropsOf<typeof Touchable> & {
+    visible: boolean
+    wrapperProps?: PropsOf<typeof View>
+    variants?: ComponentVariants<typeof BackdropStyles>['variants']
+    styles?: StylesOf<BackdropComposition>
+}
+
+export const Backdrop = (backdropProps:BackdropProps) => {
+  const { variants = [], styles = {}, visible, children, wrapperProps = {}, ...props } = backdropProps
+
+  const variantStyles = useDefaultComponentStyle<'u:Backdrop', typeof BackdropStyles>('u:Backdrop', {
+    variants,
+    rootElement: 'wrapper',
+    styles,
+    transform: StyleSheet.flatten,
+  })
+
+  const animationStates = useStaticAnimationStyles(variantStyles, ['wrapper:hidden', 'wrapper:visible'])
+
+  const animation = useDynamicAnimation(() => {
+    return visible ? animationStates['wrapper:visible'] : animationStates['wrapper:hidden']
+  })
+
+  onUpdate(() => {
+    animation.animateTo(visible ? animationStates['wrapper:visible'] : animationStates['wrapper:hidden'])
+  }, [visible, animationStates])
+
+  return <View pointerEvents={visible ? 'auto' : 'none' } animated style={variantStyles.wrapper} state={animation} {...wrapperProps}>
+    {
+      props?.onPress ?
+        <Touchable style={variantStyles.touchable} {...props} noFeedback android_ripple={null}/>
+        : null
+    }
+    {children}
+  </View>
+}

package/src/components/Backdrop/styles.ts

@@ -0,0 +1,33 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
+export type BackdropComposition =
+ 'wrapper'|
+'touchable' |
+'wrapper:visible' |
+'wrapper:hidden'
+
+const createBackdropVariant = createDefaultVariantFactory<BackdropComposition>()
+
+const presets = includePresets((style) => createBackdropVariant(() => ({ wrapper: style })))
+
+export const BackdropStyles = {
+  ...presets,
+  default: createBackdropVariant((theme) => ({
+    wrapper: {
+      backgroundColor: theme.colors.black,
+      ...theme.presets.whole,
+      ...theme.presets.absolute,
+    },
+    'wrapper:visible': {
+      opacity: 0.5,
+    },
+    'wrapper:hidden': {
+
+      opacity: 0,
+    },
+    touchable: {
+      ...theme.presets.whole,
+      ...theme.presets.absolute,
+    },
+  })),
+}