@expo/ui 55.0.2 → 55.0.3

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)} />;
+}