@expo/ui 55.0.1 → 55.0.3

package/src/jetpack-compose/Button/index.tsx

@@ -1,139 +1,116 @@
 import { requireNativeView } from 'expo';
 import { type ColorValue } from 'react-native';
 
-import { MaterialIcon } from './types';
-import { ExpoModifier, ViewEvent } from '../../types';
-import { getTextFromChildren } from '../../utils';
-import { parseJSXShape, ShapeJSXElement, ShapeRecordProps } from '../Shape';
+import type { ModifierConfig, ViewEvent } from '../../types';
+import { ShapeJSXElement, ShapeRecordProps, parseJSXShape } from '../Shape';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
 /**
- * The built-in button styles available on Android.
- * - `outlined` - A button with an outline.
- * - `elevated` - A filled button with a shadow.
+ * Colors for button elements.
  */
-export type ButtonVariant = 'default' | 'bordered' | 'borderless' | 'outlined' | 'elevated';
-
-/**
- * Colors for button's core elements.
- */
-export type ButtonElementColors = {
+export type ButtonColors = {
   containerColor?: ColorValue;
   contentColor?: ColorValue;
   disabledContainerColor?: ColorValue;
   disabledContentColor?: ColorValue;
 };
 
+/**
+ * Content padding for the button's inner content.
+ * All values are in density-independent pixels (dp).
+ */
+export type ButtonContentPadding = {
+  start?: number;
+  top?: number;
+  end?: number;
+  bottom?: number;
+};
+
 export type ButtonProps = {
   /**
-   * A callback that is called when the button is pressed.
-   */
-  onPress?: () => void;
-  /**
-   * A string describing the leading icon to display in the button.
-   * Uses Material Icons on Android.
-   */
-  leadingIcon?: MaterialIcon;
-  /**
-   * A string describing the trailing icon to display in the button.
-   * Uses Material Icons on Android.
-   */
-  trailingIcon?: MaterialIcon;
-  /**
-   * A string describing the system image to display in the button.
-   * Uses Material Icons on Android.
-   * @deprecated Use `leadingIcon` instead.
+   * Callback that is called when the button is clicked.
    */
-  systemImage?: MaterialIcon;
+  onClick?: () => void;
   /**
-   * The button variant.
+   * Whether the button is enabled for user interaction.
+   * @default true
    */
-  variant?: ButtonVariant;
+  enabled?: boolean;
   /**
-   * The text to display inside the button.
+   * Colors for button elements.
    */
-  children?: string | string[] | React.JSX.Element;
+  colors?: ButtonColors;
   /**
-   * Colors for button's core elements.
-   * @platform android
+   * The padding between the button container and its content.
+   * Use this to adjust internal spacing, for example when adding a leading icon
    */
-  elementColors?: ButtonElementColors;
+  contentPadding?: ButtonContentPadding;
   /**
-   * Button color.
+   * The shape of the button.
    */
-  color?: ColorValue;
   shape?: ShapeJSXElement;
   /**
-   * Disabled state of the button.
+   * Modifiers for the component.
    */
-  disabled?: boolean;
-
+  modifiers?: ModifierConfig[];
   /**
-   * Modifiers for the component.
+   * Content to display inside the button.
    */
-  modifiers?: ExpoModifier[];
+  children: React.ReactNode;
 };
 
-/**
- * @hidden
- */
-export type NativeButtonProps = Omit<
-  ButtonProps,
-  'role' | 'onPress' | 'leadingIcon' | 'trailingIcon' | 'systemImage' | 'shape'
-> & {
-  text: string;
-  leadingIcon?: string;
-  trailingIcon?: string;
+type NativeButtonProps = Omit<ButtonProps, 'onClick' | 'shape' | 'children'> & {
   shape?: ShapeRecordProps;
+  children?: React.ReactNode;
 } & ViewEvent<'onButtonPressed', void>;
 
-// We have to work around the `role` and `onPress` props being reserved by React Native.
-const ButtonNativeView: React.ComponentType<NativeButtonProps> = requireNativeView(
-  'ExpoUI',
-  'Button'
-);
-
 /**
  * @hidden
  */
-export function transformButtonProps(props: ButtonProps): NativeButtonProps {
-  const {
-    children,
-    onPress,
-    leadingIcon,
-    trailingIcon,
-    systemImage,
-    shape,
-    modifiers,
-    ...restProps
-  } = props;
-
-  // Handle backward compatibility: systemImage maps to leadingIcon
-  const finalLeadingIcon = leadingIcon ?? systemImage;
-
+export function transformButtonProps(props: Omit<ButtonProps, 'children'>): NativeButtonProps {
+  const { onClick, shape, modifiers, ...restProps } = props;
   return {
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
-    text: getTextFromChildren(children) ?? '',
-    children: getTextFromChildren(children) !== undefined ? undefined : children,
-    leadingIcon: finalLeadingIcon,
+    enabled: props.enabled ?? true,
     shape: parseJSXShape(shape),
-    trailingIcon,
-    onButtonPressed: onPress,
-    elementColors: props.elementColors
-      ? props.elementColors
-      : props.color
-        ? {
-            containerColor: props.color,
-          }
-        : undefined,
+    onButtonPressed: onClick ? () => onClick() : undefined,
   };
 }
 
+function createButtonComponent(name: string) {
+  const NativeView: React.ComponentType<NativeButtonProps> = requireNativeView('ExpoUI', name);
+
+  function Component(props: ButtonProps) {
+    const { children, ...restProps } = props;
+    return <NativeView {...transformButtonProps(restProps)}>{children}</NativeView>;
+  }
+  Component.displayName = name;
+  return Component;
+}
+
 /**
- * Displays a native button component.
+ * A filled button component.
  */
-export function Button(props: ButtonProps) {
-  return <ButtonNativeView {...transformButtonProps(props)} />;
-}
+export const Button = createButtonComponent('Button');
+
+/**
+ * A filled tonal button component.
+ */
+export const FilledTonalButton = createButtonComponent('FilledTonalButton');
+
+/**
+ * An outlined button component.
+ */
+export const OutlinedButton = createButtonComponent('OutlinedButton');
+
+/**
+ * An elevated button component.
+ */
+export const ElevatedButton = createButtonComponent('ElevatedButton');
+
+/**
+ * A text button component.
+ */
+export const TextButton = createButtonComponent('TextButton');

package/src/jetpack-compose/Card/index.tsx

@@ -1,62 +1,138 @@
 import { requireNativeView } from 'expo';
 import { type ColorValue } from 'react-native';
 
-import { ExpoModifier } from '../../types';
+import { type ModifierConfig } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
 /**
  * Colors for card's core elements.
  */
-export type CardElementColors = {
+export type CardColors = {
   containerColor?: ColorValue;
   contentColor?: ColorValue;
 };
 
+/**
+ * Border configuration for cards.
+ */
+export type CardBorder = {
+  /**
+   * Border width in dp.
+   * @default 1
+   */
+  width?: number;
+  /**
+   * Border color.
+   */
+  color?: ColorValue;
+};
+
+function transformProps<T extends { modifiers?: ModifierConfig[] }>(props: T): T {
+  const { modifiers, ...restProps } = props;
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+  } as T;
+}
+
+function createCardComponent<P extends { modifiers?: ModifierConfig[] }>(
+  viewName: string
+): React.ComponentType<P> {
+  const NativeView: React.ComponentType<P> = requireNativeView('ExpoUI', viewName);
+  return function CardComponent(props: P) {
+    return <NativeView {...transformProps(props)} />;
+  };
+}
+
+// region Card
+
 export type CardProps = {
   /**
    * The content to display inside the card.
    */
   children?: React.ReactNode;
   /**
-   * The variant of the card.
-   * - 'default' - A filled card with no outline.
-   * - 'elevated' - A filled card with elevation/shadow.
-   * - 'outlined' - A card with an outline border.
-   * @default 'default'
+   * Colors for card's core elements.
    */
-  variant?: 'default' | 'elevated' | 'outlined';
+  colors?: CardColors;
   /**
-   * The background color of the card.
+   * Default elevation in dp.
    */
-  color?: ColorValue;
+  elevation?: number;
+  /**
+   * Border configuration for the card.
+   */
+  border?: CardBorder;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ModifierConfig[];
+};
+
+/**
+ * A card component that renders a filled card surface for content.
+ */
+export const Card = createCardComponent<CardProps>('CardView');
+
+// endregion
+
+// region ElevatedCard
+
+export type ElevatedCardProps = {
+  /**
+   * The content to display inside the card.
+   */
+  children?: React.ReactNode;
   /**
    * Colors for card's core elements.
    */
-  elementColors?: CardElementColors;
+  colors?: CardColors;
+  /**
+   * Default elevation in dp. Material 3 default is 1dp.
+   */
+  elevation?: number;
   /**
    * Modifiers for the component.
    */
-  modifiers?: ExpoModifier[];
+  modifiers?: ModifierConfig[];
 };
 
-type NativeCardProps = CardProps;
-const CardNativeView: React.ComponentType<NativeCardProps> = requireNativeView(
-  'ExpoUI',
-  'CardView'
-);
+/**
+ * An elevated card component that provides a raised surface for content.
+ */
+export const ElevatedCard = createCardComponent<ElevatedCardProps>('ElevatedCardView');
 
-function transformProps(props: CardProps): NativeCardProps {
-  const { modifiers, ...restProps } = props;
-  return {
-    modifiers,
-    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
-    ...restProps,
-  };
-}
+// endregion
+
+// region OutlinedCard
+
+export type OutlinedCardProps = {
+  /**
+   * The content to display inside the card.
+   */
+  children?: React.ReactNode;
+  /**
+   * Colors for card's core elements.
+   */
+  colors?: CardColors;
+  /**
+   * Default elevation in dp.
+   */
+  elevation?: number;
+  /**
+   * Border configuration for the outlined card.
+   */
+  border?: CardBorder;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ModifierConfig[];
+};
 
 /**
- * A card component that provides a surface for content.
+ * An outlined card component that provides a bordered surface for content.
  */
-export function Card(props: CardProps) {
-  return <CardNativeView {...transformProps(props)} />;
-}
+export const OutlinedCard = createCardComponent<OutlinedCardProps>('OutlinedCardView');
+
+// endregion

package/src/jetpack-compose/Checkbox/index.tsx

@@ -0,0 +1,126 @@
+import { requireNativeView } from 'expo';
+import { NativeSyntheticEvent, type ColorValue } from 'react-native';
+
+import { type ModifierConfig, ViewEvent } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+
+/**
+ * Colors for checkbox core elements.
+ */
+export type CheckboxColors = {
+  checkedColor?: ColorValue;
+  disabledCheckedColor?: ColorValue;
+  uncheckedColor?: ColorValue;
+  disabledUncheckedColor?: ColorValue;
+  checkmarkColor?: ColorValue;
+  disabledIndeterminateColor?: ColorValue;
+};
+
+export type CheckboxProps = {
+  /**
+   * Indicates whether the checkbox is checked.
+   */
+  value: boolean;
+  /**
+   * Whether the checkbox is enabled.
+   * @default true
+   */
+  enabled?: boolean;
+  /**
+   * Callback function that is called when the checked state changes.
+   */
+  onCheckedChange?: (value: boolean) => void;
+  /**
+   * Colors for checkbox core elements.
+   */
+  colors?: CheckboxColors;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ModifierConfig[];
+};
+
+type NativeCheckboxProps = Omit<CheckboxProps, 'onCheckedChange'> & {
+  nativeClickable: boolean;
+  onCheckedChange: (event: NativeSyntheticEvent<{ value: boolean }>) => void;
+};
+
+const CheckboxNativeView: React.ComponentType<NativeCheckboxProps> = requireNativeView(
+  'ExpoUI',
+  'CheckboxView'
+);
+
+function transformCheckboxProps(props: CheckboxProps): NativeCheckboxProps {
+  const { modifiers, onCheckedChange, ...restProps } = props;
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+    nativeClickable: onCheckedChange != null,
+    onCheckedChange: ({ nativeEvent: { value } }) => {
+      onCheckedChange?.(value);
+    },
+  };
+}
+
+/**
+ * A checkbox component.
+ */
+export function Checkbox(props: CheckboxProps) {
+  return <CheckboxNativeView {...transformCheckboxProps(props)} />;
+}
+
+/**
+ * The toggleable state of a tri-state checkbox.
+ */
+export type ToggleableState = 'on' | 'off' | 'indeterminate';
+
+export type TriStateCheckboxProps = {
+  /**
+   * The toggleable state of the checkbox: `'on'`, `'off'`, or `'indeterminate'`.
+   */
+  state: ToggleableState;
+  /**
+   * Whether the checkbox is enabled.
+   * @default true
+   */
+  enabled?: boolean;
+  /**
+   * Callback function that is called when the checkbox is clicked.
+   */
+  onClick?: () => void;
+  /**
+   * Colors for checkbox core elements.
+   */
+  colors?: CheckboxColors;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ModifierConfig[];
+};
+
+type NativeTriStateCheckboxProps = Omit<TriStateCheckboxProps, 'onClick'> & {
+  nativeClickable: boolean;
+} & ViewEvent<'onNativeClick', void>;
+
+const TriStateCheckboxNativeView: React.ComponentType<NativeTriStateCheckboxProps> =
+  requireNativeView('ExpoUI', 'TriStateCheckboxView');
+
+function transformTriStateCheckboxProps(props: TriStateCheckboxProps): NativeTriStateCheckboxProps {
+  const { modifiers, onClick, ...restProps } = props;
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+    nativeClickable: onClick != null,
+    onNativeClick: onClick ? () => onClick() : undefined,
+  };
+}
+
+/**
+ * A tri-state checkbox component that supports `'on'`, `'off'`, and `'indeterminate'` states.
+ * Useful for "select all" patterns where the parent checkbox reflects the state of its children.
+ */
+export function TriStateCheckbox(props: TriStateCheckboxProps) {
+  return <TriStateCheckboxNativeView {...transformTriStateCheckboxProps(props)} />;
+}