@expo/ui 1.0.0-canary-20250306-d9d3e02 → 1.0.0-canary-20250331-817737a

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

@@ -1,8 +1,16 @@
 import { StyleProp, ViewStyle } from 'react-native';
 export type SectionProps = {
-    style?: StyleProp<ViewStyle>;
-    title: string;
+    /**
+     * @note On iOS, section titles are usually capitalized for consistency with platform conventions.
+     */
+    title?: string;
     children: any;
+    style?: StyleProp<ViewStyle>;
 };
+/**
+ * Section component uses the native [Section](https://developer.apple.com/documentation/swiftui/section) component.
+ * It has no intrinsic dimensions, so it needs explicit height or flex set to display content (like ScrollView).
+ * @platform ios
+ */
 export declare function Section({ children }: SectionProps): any;
 //# sourceMappingURL=index.d.ts.map

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;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE,YAAY,OAEjD"}

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

@@ -22,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;
@@ -53,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,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,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/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,iBAAiB,CAAC;AAE5C,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

@@ -1,9 +1,11 @@
-export type * from '../components/Switch';
-export type * from '../components/Picker';
 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';
+export type * from '../components/Label';
+export type * from '../components/List';
 /**
  * @hidden
  */

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,mBAAmB,sBAAsB,CAAC;AAC1C,mBAAmB,sBAAsB,CAAC;AAC1C,mBAAmB,sBAAsB,CAAC;AAC1C,mBAAmB,2BAA2B,CAAC;AAC/C,mBAAmB,uBAAuB,CAAC;AAC3C,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"}
+{"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;AAC1C,mBAAmB,qBAAqB,CAAC;AACzC,mBAAmB,oBAAoB,CAAC;AAExC;;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

@@ -69,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;

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 { 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,23 +28,17 @@ type SubmenuElement =
   | ReactElement<PickerProps>
   | ReactElement<SubmenuProps>;
 
-type ContentChildren = SubmenuElement | SubmenuElement[];
-
-/**
- * @hidden
- */
 export type ContextMenuContentProps = {
-  children: ContentChildren;
+  children: SubmenuElement | SubmenuElement[];
 };
 
 /**
  * @hidden
  */
-export type EventHandlers = {
-  [key: string]: {
-    [key: string]: (event: NativeSyntheticEvent<any>) => void;
-  };
-};
+export type EventHandlers = Record<
+  string,
+  Record<string, (event: NativeSyntheticEvent<any>) => void>
+>;
 
 /**
  * @hidden
@@ -47,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.
    *
@@ -87,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 }>
@@ -114,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.
@@ -127,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.
  *
@@ -136,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 (
@@ -161,3 +189,9 @@ export function ContextMenu(props: ContextMenuProps) {
     />
   );
 }
+
+ContextMenu.Trigger = Trigger;
+ContextMenu.Preview = Preview;
+ContextMenu.Items = Items;
+
+export { ContextMenu };

package/components/DatePicker/index.tsx

@@ -15,12 +15,12 @@ type DisplayedComponents = 'date' | 'hourAndMinute' | 'dateAndTime';
  */
 export type DatePickerProps = {
   /**
-   * The intial date to display on the picker.
+   * The initial date to display on the picker.
    */
   initialDate?: string | null;
   /**
    * A title displayed on the picker on iOS.
-   * @platform iOS
+   * @platform ios
    */
   title?: string;
   /**
@@ -29,7 +29,7 @@ export type DatePickerProps = {
   onDateSelected?: (date: Date) => void;
   /**
    * The variant of the picker, which determines its appearance and behavior.
-   * @platform iOS
+   * @platform ios
    * @default 'automatic'
    */
   iosVariant?: IOSVariant;
@@ -42,15 +42,15 @@ export type DatePickerProps = {
   /**
    * Show to button to toggle between variants on Android.
    * @platform android
-   * @default 'true'
+   * @default true
    */
   showVariantToggle?: boolean;
   /**
    * The components that the picker should display.
-   * On iOS, you can have a picker that selects both date and time.
    * On Android, you can have a picker that selects just the date or just the time.
    * `dateAndTime` is only available on iOS and will result in a date picker on Android.
-   * @default ['date']
+   * On iOS, you can have a picker that selects both date and time.
+   * @default 'date'
    */
   displayedComponents?: DisplayedComponents;
   /**

package/components/Label/index.ios.tsx

@@ -0,0 +1,16 @@
+import { requireNativeView } from 'expo';
+
+import { LabelProps } from '.';
+
+const LabelNativeView: React.ComponentType<LabelProps> = requireNativeView('ExpoUI', 'LabelView');
+
+/**
+ * Renders a native label view, which could be used in a list or section.
+ *
+ * @param {LabelProps} props - The properties passed to the Label component.
+ * @returns {JSX.Element} The rendered native Label component.
+ * @platform ios
+ */
+export function Label(props: LabelProps) {
+  return <LabelNativeView {...props} />;
+}

package/components/Label/index.tsx

@@ -0,0 +1,34 @@
+import { StyleProp, Text, ViewStyle } from 'react-native';
+
+export type LabelProps = {
+  /**
+   * The title text to be displayed in the label.
+   */
+  title?: string;
+
+  /**
+   * The name of the SFSymbol to be displayed in the label.
+   */
+  systemImage?: string;
+
+  /**
+   * The color of the label icon.
+   */
+  color?: string;
+
+  /**
+   * Additional styles to apply to the label.
+   */
+  style?: StyleProp<ViewStyle>;
+};
+
+/**
+ * Renders a native label view, which could be used in a list or section.
+ *
+ * @param {LabelProps} props - The properties passed to the Label component.
+ * @returns {JSX.Element} The rendered native Label component.
+ * @platform ios
+ */
+export function Label(props: LabelProps) {
+  return <Text>{props.title}</Text>;
+}