@expo/ui 0.0.2 → 0.1.0-alpha.0

package/build/{components/ContextMenu → ContextMenu}/index.d.ts

@@ -1,18 +1,20 @@
-import React, { ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { NativeSyntheticEvent, StyleProp, ViewStyle } from 'react-native';
+import { MenuElement } from './utils';
 import { ButtonProps } from '../Button';
 import { PickerProps } from '../Picker';
 import { SwitchProps } from '../Switch';
 type SubmenuElement = ReactElement<ButtonProps> | ReactElement<SwitchProps> | ReactElement<PickerProps> | ReactElement<SubmenuProps>;
-type ContentChildren = SubmenuElement | SubmenuElement[];
 export type ContextMenuContentProps = {
-    children: ContentChildren;
-};
-export type EventHandlers = {
-    [key: string]: {
-        [key: string]: (event: NativeSyntheticEvent<any>) => void;
-    };
+    children: SubmenuElement | SubmenuElement[];
 };
+/**
+ * @hidden
+ */
+export type EventHandlers = Record<string, Record<string, (event: NativeSyntheticEvent<any>) => void>>;
+/**
+ * @hidden
+ */
 export type ContextMenuElementBase = {
     contextMenuElementID: string;
 };
@@ -26,12 +28,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.
      *
@@ -43,6 +39,12 @@ export type ContextMenuProps = {
      * The children will be wrapped in a pressable element, which triggers opening of the context menu.
      */
     children: ReactNode;
+    /**
+     * The color of the container holding the context menu items.
+     *
+     * @platform android
+     */
+    color?: string;
     /**
      * Optional styles to apply to the `ContextMenu`
      */
@@ -55,17 +57,59 @@ 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;
+};
+/**
+ * @hidden
+ */
+export type NativeMenuProps = ContextMenuProps & {
+    elements: MenuElement[];
+    onContextMenuButtonPressed: (event: NativeSyntheticEvent<{
+        contextMenuElementID: string;
+    }>) => void;
+    onContextMenuSwitchValueChanged: (event: NativeSyntheticEvent<{
+        contextMenuElementID: string;
+        value: boolean;
+    }>) => void;
+    onContextMenuPickerOptionSelected: (event: NativeSyntheticEvent<{
+        index: number;
+        label: string;
+        contextMenuElementID: string;
+    }>) => void;
 };
 /**
  * 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.
  */
-export declare function Submenu(props: SubmenuProps): React.JSX.Element;
+export declare function Submenu(props: SubmenuProps): import("react").JSX.Element;
+/**
+ * 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 declare function Items(props: {
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+export declare namespace Items {
+    var tag: string;
+}
+/**
+ * The component visible all the time that triggers the menu when tapped or long-pressed.
+ */
+export declare function Trigger(props: {
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+/**
+ * The component visible above the menu when it is opened.
+ * @platform ios
+ */
+export declare function Preview(props: {
+    children: React.ReactNode;
+}): import("react").JSX.Element;
 /**
  * `ContextMenu` allows you to create a context menu, which can be used to provide additional options to the user.
  *
@@ -75,6 +119,11 @@ export declare function Submenu(props: SubmenuProps): React.JSX.Element;
  * - 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 declare function ContextMenu(props: ContextMenuProps): React.JSX.Element;
-export {};
+declare function ContextMenu(props: ContextMenuProps): import("react").JSX.Element;
+declare namespace ContextMenu {
+    var Trigger: typeof import(".").Trigger;
+    var Preview: typeof import(".").Preview;
+    var Items: typeof import(".").Items;
+}
+export { ContextMenu };
 //# sourceMappingURL=index.d.ts.map

package/build/ContextMenu/index.d.ts.map

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

package/build/ContextMenu/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../ContextMenu/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0C,SAAS,EAAE,MAAM,OAAO,CAAC;AAG1E,OAAO,EAAE,sBAAsB,EAAE,aAAa,EAAyB,MAAM,SAAS,CAAC;AACvF,OAAO,EAAuB,iBAAiB,EAAwB,MAAM,WAAW,CAAC;AACzF,OAAO,EAAU,WAAW,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,EAAU,WAAW,EAAE,MAAM,WAAW,CAAC;AAGhD,KAAK,iBAAiB,GAAG;IACvB,MAAM,EAAE,iBAAiB,CAAC;CAC3B,GAAG,sBAAsB,CAAC;AAE3B,KAAK,iBAAiB,GAAG;IACvB,MAAM,EAAE,WAAW,CAAC;CACrB,GAAG,sBAAsB,CAAC;AAE3B,KAAK,iBAAiB,GAAG;IACvB,MAAM,EAAE,WAAW,CAAC;CACrB,GAAG,sBAAsB,CAAC;AAE3B,KAAK,cAAc,GAAG;IACpB,OAAO,EAAE;QACP,QAAQ,EAAE,WAAW,EAAE,CAAC;QACxB,MAAM,EAAE,iBAAiB,CAAC;KAC3B,CAAC;CACH,GAAG,sBAAsB,CAAC;AAE3B,MAAM,MAAM,WAAW,GACnB,iBAAiB,GACjB,iBAAiB,GACjB,iBAAiB,GACjB,cAAc,CAAC;AAInB,wBAAgB,+BAA+B,CAC7C,QAAQ,EAAE,SAAS,EACnB,gBAAgB,EAAE,aAAa,GAC9B,WAAW,EAAE,CAIf"}

package/build/Label/index.d.ts

@@ -0,0 +1,28 @@
+import { StyleProp, 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 declare function Label(props: LabelProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/build/Label/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../Label/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAQ,SAAS,EAAE,MAAM,cAAc,CAAC;AAE1D,MAAM,MAAM,UAAU,GAAG;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,+BAEtC"}

package/build/List/index.d.ts

@@ -0,0 +1,87 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import { ViewEvent } from '../src/types';
+export type ListStyle = 'automatic' | 'plain' | 'inset' | 'insetGrouped' | 'grouped' | 'sidebar';
+export interface ListProps {
+    /**
+     * Custom style for the container wrapping the list.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * One of the predefined ListStyle types in SwiftUI.
+     * @default 'automatic'
+     */
+    listStyle?: ListStyle;
+    /**
+     * Allows the selection of list items.
+     * @default false
+     */
+    selectEnabled?: boolean;
+    /**
+     * Enables reordering of list items.
+     * @default false
+     */
+    moveEnabled?: boolean;
+    /**
+     * Allows the deletion of list items.
+     * @default false
+     */
+    deleteEnabled?: boolean;
+    /**
+     * Makes the list scrollable.
+     * @default true
+     * @platform ios 16.0+
+     */
+    scrollEnabled?: boolean;
+    /**
+     * Enables SwiftUI edit mode.
+     * @default false
+     */
+    editModeEnabled?: boolean;
+    /**
+     * The children elements to be rendered inside the list.
+     */
+    children: React.ReactNode;
+    /**
+     * Callback triggered when an item is deleted from the list.
+     */
+    onDeleteItem?: (index: number) => void;
+    /**
+     * Callback triggered when an item is moved in the list.
+     */
+    onMoveItem?: (from: number, to: number) => void;
+    /**
+     * Callback triggered when the selection changes in a list.
+     */
+    onSelectionChange?: (selection: number[]) => void;
+}
+/**
+ * DeleteItemEvent represents an event triggered when an item is deleted from the list.
+ */
+type DeleteItemEvent = ViewEvent<'onDeleteItem', {
+    index: number;
+}>;
+/**
+ * MoveItemEvent represents an event triggered when an item is moved in the list.
+ */
+type MoveItemEvent = ViewEvent<'onMoveItem', {
+    from: number;
+    to: number;
+}>;
+/**
+ * SelectItemEvent represents an event triggered when the selection changes in a list.
+ */
+type SelectItemEvent = ViewEvent<'onSelectionChange', {
+    selection: number[];
+}>;
+export type NativeListProps = Omit<ListProps, 'onDeleteItem' | 'onMoveItem' | 'onSelectionChange'> & DeleteItemEvent & MoveItemEvent & SelectItemEvent & {
+    children: React.ReactNode;
+};
+/**
+ * A list component that renders its children using a native SwiftUI list.
+ * @param {ListProps} props - The properties for the list component.
+ * @returns {JSX.Element | null} The rendered list with its children or null if the platform is unsupported.
+ * @platform ios
+ */
+export declare function List({ children }: ListProps): import("react").ReactNode;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/build/List/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../List/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,MAAM,MAAM,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,OAAO,GAAG,cAAc,GAAG,SAAS,GAAG,SAAS,CAAC;AAEjG,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAEhD;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACnD;AAED;;GAEG;AACH,KAAK,eAAe,GAAG,SAAS,CAAC,cAAc,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AACpE;;GAEG;AACH,KAAK,aAAa,GAAG,SAAS,CAAC,YAAY,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAC3E;;GAEG;AACH,KAAK,eAAe,GAAG,SAAS,CAAC,mBAAmB,EAAE;IAAE,SAAS,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC,CAAC;AAE/E,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,EAAE,cAAc,GAAG,YAAY,GAAG,mBAAmB,CAAC,GAChG,eAAe,GACf,aAAa,GACb,eAAe,GAAG;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEJ;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,EAAE,SAAS,6BAE3C"}

package/build/Picker/index.d.ts

@@ -0,0 +1,76 @@
+import { StyleProp, ViewStyle } from 'react-native';
+/**
+ * Colors for picker's core elements.
+ * @platform android
+ */
+export type PickerElementColors = {
+    activeBorderColor?: string;
+    activeContentColor?: string;
+    inactiveBorderColor?: string;
+    inactiveContentColor?: string;
+    disabledActiveBorderColor?: string;
+    disabledActiveContentColor?: string;
+    disabledInactiveBorderColor?: string;
+    disabledInactiveContentColor?: string;
+    activeContainerColor?: string;
+    inactiveContainerColor?: string;
+    disabledActiveContainerColor?: string;
+    disabledInactiveContainerColor?: string;
+};
+/**
+ * Props for the Picker component.
+ */
+export type PickerProps = {
+    /**
+     * An array of options to be displayed in the picker.
+     */
+    options: string[];
+    /**
+     * The index of the currently selected option.
+     */
+    selectedIndex: number | null;
+    /**
+     * A label displayed on the picker when in `'menu'` variant inside a form section on iOS.
+     * @platform ios
+     */
+    label?: string;
+    /**
+     * Callback function that is called when an option is selected.
+     */
+    onOptionSelected?: (event: {
+        nativeEvent: {
+            index: number;
+            label: string;
+        };
+    }) => void;
+    /**
+     * The variant of the picker, which determines its appearance and behavior.
+     * The `'wheel'`, `'inline'`, `'palette'` and `'menu'` variants are iOS only, the `'radio'` variant is Android only. The `'inline'` variant can only be used inside sections or lists. The `'palette'` variant displays differently inside menus.
+     * @default 'segmented'
+     */
+    variant?: 'wheel' | 'segmented' | 'menu' | 'radio' | 'inline' | 'palette';
+    /**
+     * Optional style to apply to the picker component.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Colors for picker's core elements.
+     * @platform android
+     */
+    elementColors?: PickerElementColors;
+    /**
+     * Picker color. On iOS it only applies to the `'menu'` variant.
+     */
+    color?: string;
+};
+type NativePickerProps = PickerProps;
+/**
+ * @hidden
+ */
+export declare function transformPickerProps(props: PickerProps): NativePickerProps;
+/**
+ * Displays a native picker component. Depending on the variant it can be a segmented button, an inline picker, a list of choices or a radio button.
+ */
+export declare function Picker(props: PickerProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/build/Picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../Picker/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,8BAA8B,CAAC,EAAE,MAAM,CAAC;CACzC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB;;OAEG;IACH,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IACtF;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC1E;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;;OAGG;IACH,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAOF,KAAK,iBAAiB,GAAG,WAAW,CAAC;AAErC;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,WAAW,GAAG,iBAAiB,CAa1E;AAED;;GAEG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,+BAExC"}

package/build/Section/index.d.ts

@@ -0,0 +1,16 @@
+import { StyleProp, ViewStyle } from 'react-native';
+export type SectionProps = {
+    /**
+     * 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/Section/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../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 → 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/Slider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../Slider/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC;;;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 → 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/Switch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../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/src/types.d.ts

@@ -0,0 +1,15 @@
+export type * from '../Button';
+export type * from '../ContextMenu';
+export type * from '../Picker';
+export type * from '../Section';
+export type * from '../Slider';
+export type * from '../Switch';
+export type * from '../Label';
+export type * from '../List';
+/**
+ * @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,WAAW,CAAC;AAC/B,mBAAmB,gBAAgB,CAAC;AACpC,mBAAmB,WAAW,CAAC;AAC/B,mBAAmB,YAAY,CAAC;AAChC,mBAAmB,WAAW,CAAC;AAC/B,mBAAmB,WAAW,CAAC;AAC/B,mBAAmB,UAAU,CAAC;AAC9B,mBAAmB,SAAS,CAAC;AAE7B;;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/expo-module.config.json

@@ -1,9 +1,9 @@
 {
   "platforms": ["apple", "android"],
-  "android": {
-    "modules": ["expo.modules.ui.ExpoUIModule"]
-  },
   "apple": {
     "modules": ["ExpoUIModule"]
+  },
+  "android": {
+    "modules": ["expo.modules.ui.ExpoUIModule"]
   }
 }

package/ios/BottomSheetView.swift

@@ -0,0 +1,86 @@
+// Copyright 2025-present 650 Industries. All rights reserved.
+
+import SwiftUI
+import ExpoModulesCore
+
+class BottomSheetProps: ExpoSwiftUI.ViewProps {
+  @Field var isOpened: Bool = false
+  var onIsOpenedChange = EventDispatcher()
+}
+
+struct HeightPreferenceKey: PreferenceKey {
+  static var defaultValue: CGFloat?
+
+  static func reduce(value: inout CGFloat?, nextValue: () -> CGFloat?) {
+    guard let nextValue = nextValue() else {
+      return
+    }
+    value = nextValue
+  }
+}
+
+private struct ReadHeightModifier: ViewModifier {
+  private var sizeView: some View {
+    GeometryReader { geometry in
+      Color.clear.preference(key: HeightPreferenceKey.self, value: geometry.size.height)
+    }
+  }
+
+  func body(content: Content) -> some View {
+    content.background(sizeView)
+  }
+}
+
+struct BottomSheetView: ExpoSwiftUI.View, ExpoSwiftUI.WithHostingView {
+  @ObservedObject var props: BottomSheetProps
+
+  @State private var isOpened = true
+  @State var height: CGFloat = 0
+
+  init(props: BottomSheetProps) {
+    self.props = props
+  }
+
+  var body: some View {
+    if #available(iOS 16.0, tvOS 16.0, *) {
+      Rectangle().hidden()
+        .modifier(ReadHeightModifier())
+        .onPreferenceChange(HeightPreferenceKey.self) { height in
+          if let height {
+            self.height = height
+          }
+        }
+        .sheet(isPresented: $isOpened) {
+          Children()
+            .presentationDetents([.height(self.height)])
+        }
+        .onChange(of: isOpened, perform: { newIsOpened in
+          if props.isOpened == newIsOpened {
+            return
+          }
+          props.onIsOpenedChange([
+            "isOpened": newIsOpened
+          ])
+        })
+        .onReceive(props.objectWillChange, perform: {
+          isOpened = props.isOpened
+        })
+    } else {
+      Rectangle().hidden()
+        .sheet(isPresented: $isOpened) {
+          Children()
+        }
+        .onChange(of: isOpened, perform: { newIsOpened in
+          if props.isOpened == newIsOpened {
+            return
+          }
+          props.onIsOpenedChange([
+            "isOpened": newIsOpened
+          ])
+        })
+        .onReceive(props.objectWillChange, perform: {
+          isOpened = props.isOpened
+        })
+    }
+  }
+}