@expo/ui 1.0.0-canary-20250305-0af9ad2 → 1.0.0-canary-20250320-7a205d3

package/build/components/Section/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Section/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,GAAG,CAAC;CACf,CAAC;AAEF,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE,YAAY,OAEjD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Section/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC;CACf,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE,YAAY,OAEjD"}

package/build/components/Slider/index.d.ts

@@ -1,5 +1,16 @@
 import { StyleProp, ViewStyle } from 'react-native';
-import { ViewEvent } from '../../src';
+import { ViewEvent } from '../../src/types';
+/**
+ * Colors for slider's core elements.
+ * @platform android
+ */
+export type SliderElementColors = {
+    thumbColor?: string;
+    activeTrackColor?: string;
+    inactiveTrackColor?: string;
+    activeTickColor?: string;
+    inactiveTickColor?: string;
+};
 export type SliderProps = {
     /**
      * Custom styles for the slider component.
@@ -11,12 +22,12 @@ export type SliderProps = {
      */
     value?: number;
     /**
-     * The number of steps between the minimum and maximum values. 0 signifies infinite steps.
+     * The number of steps between the minimum and maximum values, `0` signifies infinite steps.
      * @default 0
      */
     steps?: number;
     /**
-     * The mininum value of the slider. Updating this value does not trigger callbacks if the current value is below `min`.
+     * The minimum value of the slider. Updating this value does not trigger callbacks if the current value is below `min`.
      * @default 0
      */
     min?: number;
@@ -29,13 +40,7 @@ export type SliderProps = {
      * Colors for slider's core elements.
      * @platform android
      */
-    elementColors?: {
-        thumbColor?: string;
-        activeTrackColor?: string;
-        inactiveTrackColor?: string;
-        activeTickColor?: string;
-        inactiveTickColor?: string;
-    };
+    elementColors?: SliderElementColors;
     /**
      * Slider color.
      */
@@ -48,6 +53,9 @@ export type SliderProps = {
 type NativeSliderProps = Omit<SliderProps, 'onValueChange'> & ViewEvent<'onValueChanged', {
     value: number;
 }>;
+/**
+ * @hidden
+ */
 export declare function transformSliderProps(props: SliderProps): NativeSliderProps;
 export declare function Slider(props: SliderProps): import("react").JSX.Element;
 export {};

package/build/components/Slider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Slider/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEtC,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,aAAa,CAAC,EAAE;QACd,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;KAC5B,CAAC;IACF;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,KAAK,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,eAAe,CAAC,GACzD,SAAS,CAAC,gBAAgB,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAOjD,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,WAAW,GAAG,iBAAiB,CAqB1E;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,+BAExC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Slider/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,KAAK,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,eAAe,CAAC,GACzD,SAAS,CAAC,gBAAgB,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAOjD;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,WAAW,GAAG,iBAAiB,CAqB1E;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,+BAExC"}

package/build/components/Switch/index.d.ts

@@ -1,46 +1,22 @@
 import { NativeSyntheticEvent, StyleProp, ViewStyle } from 'react-native';
+/**
+ * Only for switch.
+ */
 type SwitchElementColors = {
-    /**
-     * Only for switch.
-     */
     checkedThumbColor?: string;
-    /**
-     * Only for switch.
-     */
     checkedTrackColor?: string;
-    /**
-     * Only for switch.
-     */
     uncheckedThumbColor?: string;
-    /**
-     * Only for switch.
-     */
     uncheckedTrackColor?: string;
 };
+/**
+ * Only for checkbox.
+ */
 type CheckboxElementColors = {
-    /**
-     * Only for checkbox.
-     */
     checkedColor?: string;
-    /**
-     * Only for checkbox.
-     */
     disabledCheckedColor?: string;
-    /**
-     * Only for checkbox.
-     */
     uncheckedColor?: string;
-    /**
-     * Only for checkbox.
-     */
     disabledUncheckedColor?: string;
-    /**
-     * Only for checkbox.
-     */
     checkmarkColor?: string;
-    /**
-     * Only for checkbox.
-     */
     disabledIndeterminateColor?: string;
 };
 export type SwitchProps = {
@@ -56,7 +32,7 @@ export type SwitchProps = {
      */
     label?: string;
     /**
-     * Type of the switch component. Can be 'checkbox', 'switch', or 'button'. The 'button' style is iOS only.
+     * Type of the switch component. Can be `'checkbox'`, `'switch'`, or `'button'`. The `'button'` style is iOS only.
      * @default 'switch'
      */
     variant?: 'checkbox' | 'switch' | 'button';
@@ -69,32 +45,38 @@ export type SwitchProps = {
      */
     style?: StyleProp<ViewStyle>;
     /**
-     * Picker color. On iOS it only applies to the `menu` variant.
+     * Picker color. On iOS, it only applies to the `menu` variant.
      */
     color?: string;
-} & ({
+} & (SwitchSwitchVariantProps | SwitchCheckboxVariantProps | SwitchButtonVariantProps);
+export type SwitchSwitchVariantProps = {
     variant?: 'switch';
     /**
      * Colors for switch's core elements.
      * @platform android
      */
     elementColors?: SwitchElementColors;
-} | {
+};
+export type SwitchCheckboxVariantProps = {
     variant: 'checkbox';
     /**
      * Colors for checkbox core elements.
      * @platform android
      */
     elementColors?: CheckboxElementColors;
-} | {
+};
+export type SwitchButtonVariantProps = {
     variant: 'button';
     elementColors?: undefined;
-});
+};
 type NativeSwitchProps = Omit<SwitchProps, 'onValueChange'> & {
     onValueChange: (event: NativeSyntheticEvent<{
         value: boolean;
     }>) => void;
 };
+/**
+ * @hidden
+ */
 export declare function transformSwitchProps(props: SwitchProps): NativeSwitchProps;
 export declare function Switch(props: SwitchProps): import("react").JSX.Element;
 export {};

package/build/components/Switch/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Switch/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE1E,KAAK,mBAAmB,GAAG;IACzB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEF,KAAK,qBAAqB,GAAG;IAC3B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,0BAA0B,CAAC,EAAE,MAAM,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC3C;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,CACA;IACE,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,mBAAmB,CAAC;CACrC,GACD;IACE,OAAO,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,aAAa,CAAC,EAAE,qBAAqB,CAAC;CACvC,GACD;IACE,OAAO,EAAE,QAAQ,CAAC;IAClB,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B,CACJ,CAAC;AAEF,KAAK,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,eAAe,CAAC,GAAG;IAC5D,aAAa,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC;QAAE,KAAK,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;CAC1E,CAAC;AAyBF,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,WAAW,GAAG,iBAAiB,CAU1E;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,+BAExC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Switch/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG1E;;GAEG;AACH,KAAK,mBAAmB,GAAG;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AAGF;;GAEG;AACH,KAAK,qBAAqB,GAAG;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0BAA0B,CAAC,EAAE,MAAM,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC3C;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,CAAC,wBAAwB,GAAG,0BAA0B,GAAG,wBAAwB,CAAC,CAAC;AAEvF,MAAM,MAAM,wBAAwB,GAAG;IACrC,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,mBAAmB,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,OAAO,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,aAAa,CAAC,EAAE,qBAAqB,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,OAAO,EAAE,QAAQ,CAAC;IAClB,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B,CAAC;AAEF,KAAK,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,eAAe,CAAC,GAAG;IAC5D,aAAa,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC;QAAE,KAAK,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;CAC1E,CAAC;AAyBF;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,WAAW,GAAG,iBAAiB,CAU1E;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,+BAExC"}

package/build/components/TextInput/index.d.ts

@@ -1,5 +1,8 @@
 import { StyleProp, ViewStyle } from 'react-native';
-import { ViewEvent } from '../../src';
+import { ViewEvent } from '../../src/types';
+/**
+ * @hidden Not used anywhere yet.
+ */
 export type TextInputRole = 'default' | 'cancel' | 'destructive';
 /**
  * Props for the TextInput component.
@@ -30,6 +33,27 @@ export type TextInputProps = {
     numberOfLines?: number;
     /**
      * Determines which keyboard to open, e.g., numeric.
+     *
+     * Types that work on both platforms:
+     * - default
+     * - numeric
+     * - email-address
+     * - phone-pad
+     * - decimal-pad
+     * - ascii-capable
+     * - url
+     *
+     * Types that only work on Android:
+     * - password
+     * - password-numeric
+     *
+     * Types that only work on iOS:
+     * - numbers-and-punctuation
+     * - name-phone-pad
+     * - twitter
+     * - web-search
+     * - ascii-capable-number-pad
+     *
      * @default default
      */
     keyboardType?: 'default' | 'email-address' | 'numeric' | 'phone-pad' | 'ascii-capable' | 'numbers-and-punctuation' | 'url' | 'name-phone-pad' | 'decimal-pad' | 'twitter' | 'web-search' | 'ascii-capable-number-pad';
@@ -41,7 +65,6 @@ export type TextInputProps = {
 };
 export type NativeTextInputProps = Omit<TextInputProps, 'onChangeText'> & {} & ViewEvent<'onValueChanged', {
     value: string;
-    eventIndex: number;
 }>;
 export declare function TextInput(props: TextInputProps): import("react").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/build/components/TextInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/TextInput/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEtC,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,QAAQ,GAAG,aAAa,CAAC;AAEjE;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,YAAY,CAAC,EACT,SAAS,GACT,eAAe,GACf,SAAS,GACT,WAAW,GACX,eAAe,GACf,yBAAyB,GACzB,KAAK,GACL,gBAAgB,GAChB,aAAa,GACb,SAAS,GACT,YAAY,GACZ,0BAA0B,CAAC;IAC/B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC,GAAG,EAAE,GAAG,SAAS,CACpF,gBAAgB,EAChB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE,CACtC,CAAC;AAiBJ,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,+BAE9C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/TextInput/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,QAAQ,GAAG,aAAa,CAAC;AAEjE;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;;;;;;;;;;;;;;;;;;;OAwBG;IACH,YAAY,CAAC,EACT,SAAS,GACT,eAAe,GACf,SAAS,GACT,WAAW,GACX,eAAe,GACf,yBAAyB,GACzB,KAAK,GACL,gBAAgB,GAChB,aAAa,GACb,SAAS,GACT,YAAY,GACZ,0BAA0B,CAAC;IAC/B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC,GAAG,EAAE,GAAG,SAAS,CACpF,gBAAgB,EAChB;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAClB,CAAC;AAoBJ,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,+BAE9C"}

package/build/src/types.d.ts

@@ -0,0 +1,13 @@
+export type * from '../components/Button';
+export type * from '../components/ContextMenu';
+export type * from '../components/Picker';
+export type * from '../components/Section';
+export type * from '../components/Slider';
+export type * from '../components/Switch';
+/**
+ * @hidden
+ */
+export type ViewEvent<Name extends string, Data> = Record<Name, Data extends object ? ((event: {
+    nativeEvent: Data;
+}) => void) | undefined : (() => void) | undefined>;
+//# sourceMappingURL=types.d.ts.map

package/build/src/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,mBAAmB,sBAAsB,CAAC;AAC1C,mBAAmB,2BAA2B,CAAC;AAC/C,mBAAmB,sBAAsB,CAAC;AAC1C,mBAAmB,uBAAuB,CAAC;AAC3C,mBAAmB,sBAAsB,CAAC;AAC1C,mBAAmB,sBAAsB,CAAC;AAE1C;;GAEG;AACH,MAAM,MAAM,SAAS,CAAC,IAAI,SAAS,MAAM,EAAE,IAAI,IAAI,MAAM,CACvD,IAAI,EACJ,IAAI,SAAS,MAAM,GACf,CAAC,CAAC,KAAK,EAAE;IAAE,WAAW,EAAE,IAAI,CAAA;CAAE,KAAK,IAAI,CAAC,GAAG,SAAS,GACpD,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAC7B,CAAC"}

package/components/BottomSheet/index.ios.tsx

@@ -0,0 +1,34 @@
+import { requireNativeView } from 'expo';
+import { Dimensions, NativeSyntheticEvent, View } from 'react-native';
+
+import { BottomSheetProps } from '.';
+
+type NativeBottomSheetProps = Omit<BottomSheetProps, 'onIsOpenedChange'> & {
+  onIsOpenedChange: (event: NativeSyntheticEvent<{ isOpened: boolean }>) => void;
+};
+
+const BottomSheetNativeView: React.ComponentType<NativeBottomSheetProps> = requireNativeView(
+  'ExpoUI',
+  'BottomSheetView'
+);
+
+export function transformBottomSheetProps(props: BottomSheetProps): NativeBottomSheetProps {
+  return {
+    ...props,
+    onIsOpenedChange: ({ nativeEvent: { isOpened } }) => {
+      props?.onIsOpenedChange?.(isOpened);
+    },
+  };
+}
+
+export function BottomSheet(props: BottomSheetProps) {
+  const { width } = Dimensions.get('window');
+  return (
+    <View>
+      <BottomSheetNativeView
+        style={{ position: 'absolute', width }}
+        {...transformBottomSheetProps(props)}
+      />
+    </View>
+  );
+}

package/components/BottomSheet/index.tsx

@@ -0,0 +1,12 @@
+import { StyleProp, ViewStyle } from 'react-native';
+
+export type BottomSheetProps = {
+  style?: StyleProp<ViewStyle>;
+  children: any;
+  isOpened: boolean;
+  onIsOpenedChange: (isOpened: boolean) => void;
+};
+
+export function BottomSheet({ children }: BottomSheetProps) {
+  return children;
+}

package/components/Button/index.tsx

@@ -2,7 +2,7 @@ import { requireNativeView } from 'expo';
 import { Platform, StyleProp, StyleSheet, ViewStyle } from 'react-native';
 
 import { MaterialIcon } from './types';
-import { ViewEvent } from '../../src';
+import { ViewEvent } from '../../src/types';
 
 /**
  * The role of the button.
@@ -15,10 +15,12 @@ export type ButtonRole = 'default' | 'cancel' | 'destructive';
 
 /**
  * The built-in button styles available on iOS and Android.
+ *
  * Common styles:
  * - `default` - The default system button style.
  * - `bordered` - A button with a light fill. On Android equivalent to `FilledTonalButton`.
  * - `borderless` - A button with no background or border. On Android equivalent to `TextButton`.
+ *
  * Apple-only styles:
  * - `borderedProminent` - A bordered button with a prominent appearance.
  * - `plain` - A button with no border or background and a less prominent text.
@@ -27,6 +29,7 @@ export type ButtonRole = 'default' | 'cancel' | 'destructive';
  * - `accessoryBarAction` - A button style for accessory bar actions.
  * - `card` - A button style for cards.
  * - `link` - A button style for links.
+ *
  * Android-only styles:
  * - `outlined` - A button with an outline.
  * - `elevated` - A filled button with a shadow.
@@ -48,6 +51,17 @@ export type ButtonVariant =
   | 'outlined'
   | 'elevated';
 
+/**
+ * Colors for button's core elements.
+ * @platform android
+ */
+export type ButtonElementColors = {
+  containerColor?: string;
+  contentColor?: string;
+  disabledContainerColor?: string;
+  disabledContentColor?: string;
+};
+
 export type ButtonProps = {
   /**
    * A callback that is called when the button is pressed.
@@ -55,7 +69,7 @@ export type ButtonProps = {
   onPress?: () => void;
   /**
    * A string describing the system image to display in the button.
-   * Uses SF Symbols on iOS and Material Icons on Android.
+   * Uses Material Icons on Android and SF Symbols on iOS.
    */
   systemImage?: {
     ios?: string;
@@ -82,12 +96,7 @@ export type ButtonProps = {
    * Colors for button's core elements.
    * @platform android
    */
-  elementColors?: {
-    containerColor?: string;
-    contentColor?: string;
-    disabledContainerColor?: string;
-    disabledContentColor?: string;
-  };
+  elementColors?: ButtonElementColors;
   /**
    * Button color.
    */
@@ -98,6 +107,9 @@ export type ButtonProps = {
   disabled?: boolean;
 };
 
+/**
+ * @hidden
+ */
 export type NativeButtonProps = Omit<
   ButtonProps,
   'role' | 'onPress' | 'children' | 'systemImage'
@@ -113,6 +125,9 @@ const ButtonNativeView: React.ComponentType<NativeButtonProps> = requireNativeVi
   'Button'
 );
 
+/**
+ * @hidden
+ */
 export function transformButtonProps(props: ButtonProps): NativeButtonProps {
   const { role, children, onPress, systemImage, ...restProps } = props;
   return {
@@ -131,6 +146,9 @@ export function transformButtonProps(props: ButtonProps): NativeButtonProps {
   };
 }
 
+/**
+ * Displays a native button component.
+ */
 export function Button(props: ButtonProps) {
   // Min height from https://m3.material.io/components/buttons/specs, minWidth
   return (

package/components/ContextMenu/index.android.tsx

@@ -0,0 +1,72 @@
+import { requireNativeView } from 'expo';
+import { Children, useMemo } from 'react';
+import { NativeSyntheticEvent } from 'react-native';
+
+import { ContextMenuProps, EventHandlers, NativeMenuProps } from '.';
+import { transformChildrenToElementArray } from './utils';
+
+const MenuNativeView: React.ComponentType<NativeMenuProps> = requireNativeView(
+  'ExpoUI',
+  'ContextMenu'
+);
+
+export function Submenu() {
+  return <></>;
+}
+
+export function Items() {
+  return <></>;
+}
+Items.tag = 'Items';
+
+export function Trigger(props: { children: React.ReactNode }) {
+  return <></>;
+}
+Trigger.tag = 'Trigger';
+
+export function Preview(props: { children: React.ReactNode }) {
+  return <></>;
+}
+
+function ContextMenu(props: ContextMenuProps) {
+  const eventHandlersMap: EventHandlers = {};
+  const initialChildren = Children.map(
+    props.children as any,
+    (c: { type: { tag: string }; props: { children: React.ReactNode } }) =>
+      c.type.tag === Items.tag ? c.props.children : null
+  );
+  const processedElements = useMemo(
+    () => transformChildrenToElementArray(initialChildren, eventHandlersMap),
+    [initialChildren]
+  );
+
+  const activationElement = Children.map(
+    props.children as any,
+    (c: { type: { tag: string }; props: { children: React.ReactNode } }) =>
+      c.type.tag === Trigger.tag ? c.props.children : null
+  );
+
+  const createEventHandler =
+    (handlerType: string) => (e: NativeSyntheticEvent<{ contextMenuElementID: string }>) => {
+      const handler = eventHandlersMap[e.nativeEvent.contextMenuElementID]?.[handlerType];
+      handler?.(e);
+    };
+
+  return (
+    <MenuNativeView
+      style={props.style}
+      elements={processedElements}
+      onContextMenuButtonPressed={createEventHandler('onPress')}
+      onContextMenuSwitchValueChanged={createEventHandler('onValueChange')}
+      onContextMenuPickerOptionSelected={createEventHandler('onOptionSelected')}
+      {...props}>
+      {activationElement}
+    </MenuNativeView>
+  );
+}
+
+ContextMenu.Trigger = Trigger;
+ContextMenu.Preview = Preview;
+ContextMenu.Items = Items;
+
+export { ContextMenu };

package/components/ContextMenu/index.tsx

@@ -1,11 +1,26 @@
 import { requireNativeView } from 'expo';
-import React, { ReactElement, ReactNode, useMemo } from 'react';
+import { ComponentType, Children, ReactElement, ReactNode, useMemo } from 'react';
 import { NativeSyntheticEvent, StyleProp, ViewStyle } from 'react-native';
 
+import { MenuElement, transformChildrenToElementArray } from './utils';
 import { ButtonProps } from '../Button';
 import { PickerProps } from '../Picker';
 import { SwitchProps } from '../Switch';
-import { MenuElement, transformChildrenToElementArray } from './utils';
+
+const MenuNativeView: ComponentType<NativeMenuProps> = requireNativeView(
+  'ExpoUI',
+  'ContextMenu'
+);
+
+const MenuNativeTriggerView: ComponentType<object> = requireNativeView(
+  'ExpoUI',
+  'ContextMenuActivationElement'
+);
+
+const MenuNativePreviewView: ComponentType<object> = requireNativeView(
+  'ExpoUI',
+  'ContextMenuPreview'
+);
 
 type SubmenuElement =
   | ReactElement<ButtonProps>
@@ -13,18 +28,21 @@ type SubmenuElement =
   | ReactElement<PickerProps>
   | ReactElement<SubmenuProps>;
 
-type ContentChildren = SubmenuElement | SubmenuElement[];
-
 export type ContextMenuContentProps = {
-  children: ContentChildren;
+  children: SubmenuElement | SubmenuElement[];
 };
 
-export type EventHandlers = {
-  [key: string]: {
-    [key: string]: (event: NativeSyntheticEvent<any>) => void;
-  };
-};
+/**
+ * @hidden
+ */
+export type EventHandlers = Record<
+  string,
+  Record<string, (event: NativeSyntheticEvent<any>) => void>
+>;
 
+/**
+ * @hidden
+ */
 export type ContextMenuElementBase = { contextMenuElementID: string };
 
 /**
@@ -38,13 +56,6 @@ export type ActivationMethod = 'singlePress' | 'longPress';
  * Props of the `ContextMenu` component.
  */
 export type ContextMenuProps = {
-  /**
-   * Items visible inside the context menu. The items should be wrapped in a `React.Fragment`.
-   * `Button`, `Switch` and `Submenu` components are supported on both Android and iOS.
-   * The `Picker` component is supported only on iOS. Remember to use components from the `@expo/ui` library.
-   */
-  Items: React.ReactElement<ContextMenuContentProps>;
-
   /**
    * Determines how the context menu will be activated.
    *
@@ -78,14 +89,17 @@ export type SubmenuProps = {
   /**
    * The button that will be used to expand the submenu. On Android the `text` prop of the `Button` will be used as a section title.
    */
-  button: React.ReactElement<ButtonProps>;
+  button: ReactElement<ButtonProps>;
   /**
    * Children of the submenu. Only `Button`, `Switch`, `Picker` and `Submenu` elements should be used.
    */
-  children: React.ReactNode;
+  children: ReactNode;
 };
 
-type NativeMenuProps = ContextMenuProps & {
+/**
+ * @hidden
+ */
+export type NativeMenuProps = ContextMenuProps & {
   elements: MenuElement[];
   onContextMenuButtonPressed: (
     event: NativeSyntheticEvent<{ contextMenuElementID: string }>
@@ -105,11 +119,6 @@ type NativeMenuProps = ContextMenuProps & {
   ) => void;
 };
 
-const MenuNativeView: React.ComponentType<NativeMenuProps> = requireNativeView(
-  'ExpoUI',
-  'ContextMenu'
-);
-
 /**
  * The `Submenu` component is used to create a nested context menu. Submenus can be infinitely nested.
  * Android does not support nesting in the context menu. All the submenus will be flat-mapped into a single level with multiple titled sections.
@@ -118,6 +127,30 @@ export function Submenu(props: SubmenuProps) {
   return <></>;
 }
 
+/**
+ * Items visible inside the context menu. Pass input components as immidiate children of the tag.
+ * `Button`, `Switch` and `Submenu` components are supported on both Android and iOS.
+ * The `Picker` component is supported only on iOS. Remember to use components from the `@expo/ui` library.
+ */
+export function Items(props: { children: React.ReactNode }) {
+  return <></>;
+}
+Items.tag = 'Items';
+/**
+ * The component visible all the time that triggers the menu when tapped or long-pressed.
+ */
+export function Trigger(props: { children: React.ReactNode }) {
+  return <MenuNativeTriggerView {...props} />;
+}
+
+/**
+ * The component visible above the menu when it is opened.
+ * @platform ios
+ */
+export function Preview(props: { children: React.ReactNode }) {
+  return <MenuNativePreviewView {...props} />;
+}
+
 /**
  * `ContextMenu` allows you to create a context menu, which can be used to provide additional options to the user.
  *
@@ -127,18 +160,22 @@ export function Submenu(props: SubmenuProps) {
  * - Android does not support nesting in the context menu. All the submenus will be flat-mapped into a single level with multiple sections. The `title` prop of the `Button`, which opens the submenu on iOS will be used as a section title.
  * - Android does not support showing a `Picker` element in the context menu.
  */
-export function ContextMenu(props: ContextMenuProps) {
+function ContextMenu(props: ContextMenuProps) {
   const eventHandlersMap: EventHandlers = {};
-  const initialChildren = props.Items.props.children;
+  const initialChildren = Children.map(
+    props.children as any,
+    (c: { type: { tag: string }; props: { children: React.ReactNode } }) =>
+      c.type.tag === Items.tag ? c.props.children : null
+  );
   const processedElements = useMemo(
     () => transformChildrenToElementArray(initialChildren, eventHandlersMap),
     [initialChildren]
   );
 
   const createEventHandler =
-    (handlerType: string) => (e: NativeSyntheticEvent<{ contextMenuElementID: string }>) => {
-      const handler = eventHandlersMap[e.nativeEvent.contextMenuElementID]?.[handlerType];
-      handler?.(e);
+    (handlerType: string) => (event: NativeSyntheticEvent<{ contextMenuElementID: string }>) => {
+      const handler = eventHandlersMap[event.nativeEvent.contextMenuElementID]?.[handlerType];
+      handler?.(event);
     };
 
   return (
@@ -152,3 +189,9 @@ export function ContextMenu(props: ContextMenuProps) {
     />
   );
 }
+
+ContextMenu.Trigger = Trigger;
+ContextMenu.Preview = Preview;
+ContextMenu.Items = Items;
+
+export { ContextMenu };