@elik56a/react-native-pickers 0.0.0-stage → 0.1.1

package/src/sheet/PickerSheet.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Pressable, Text } from 'react-native';
+import { BottomSheet } from './BottomSheet';
+import type { BottomSheetProps } from './BottomSheet';
+import { textStyle, usePickerTheme } from '../theme';
+import type { ThemableProps } from '../types';
+
+export interface SheetChromeProps extends ThemableProps {
+  visible: boolean;
+  onClose: () => void;
+  title?: React.ReactNode;
+  /** Default: 'Done' */
+  confirmLabel?: string;
+  /** Default: 'Cancel' */
+  cancelLabel?: string;
+  /** Show the cancel button. Default: true */
+  showCancel?: boolean;
+  /** Passed through to the underlying BottomSheet */
+  sheetProps?: Partial<Omit<BottomSheetProps, 'visible' | 'onClose' | 'children'>>;
+}
+
+export interface PickerSheetProps extends SheetChromeProps {
+  onConfirm?: () => void;
+  confirmDisabled?: boolean;
+  children: React.ReactNode;
+}
+
+/** BottomSheet with Cancel / Done header buttons. */
+export function PickerSheet({
+  visible,
+  onClose,
+  onConfirm,
+  confirmDisabled,
+  title,
+  confirmLabel = 'Done',
+  cancelLabel = 'Cancel',
+  showCancel = true,
+  sheetProps,
+  theme: themeOverride,
+  children,
+}: PickerSheetProps) {
+  const theme = usePickerTheme(themeOverride);
+  const btn = (label: string, onPress: () => void, primary: boolean, disabled?: boolean) => (
+    <Pressable
+      onPress={disabled ? undefined : onPress}
+      hitSlop={10}
+      accessibilityRole="button"
+      accessibilityState={{ disabled }}
+      style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1, paddingVertical: 6 })}
+    >
+      <Text
+        style={[
+          textStyle(theme, 'md', primary ? 'bold' : 'regular'),
+          { color: disabled ? theme.colors.textDisabled : primary ? theme.colors.primary : theme.colors.textSecondary },
+        ]}
+      >
+        {label}
+      </Text>
+    </Pressable>
+  );
+  return (
+    <BottomSheet
+      visible={visible}
+      onClose={onClose}
+      title={title}
+      theme={themeOverride}
+      headerLeft={showCancel ? btn(cancelLabel, onClose, false) : undefined}
+      headerRight={onConfirm ? btn(confirmLabel, onConfirm, true, confirmDisabled) : undefined}
+      {...sheetProps}
+    >
+      {children}
+    </BottomSheet>
+  );
+}
+
+/** Draft state that resets to `value` every time the sheet opens. */
+export function useDraft<V>(value: V, visible: boolean): [V, (v: V) => void] {
+  const [draft, setDraft] = useState(value);
+  const wasVisible = useRef(visible);
+  useEffect(() => {
+    if (visible && !wasVisible.current) setDraft(value);
+    wasVisible.current = visible;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible]);
+  return [draft, setDraft];
+}

package/src/sheet/sheets.tsx

@@ -0,0 +1,218 @@
+import React from 'react';
+import { View } from 'react-native';
+import { PickerSheet, useDraft } from './PickerSheet';
+import type { SheetChromeProps } from './PickerSheet';
+import { Calendar } from '../date/Calendar';
+import type { CalendarBaseProps, DateRange } from '../date/Calendar';
+import { DateWheelPicker } from '../date/DateWheelPicker';
+import type { DateWheelPickerProps } from '../date/DateWheelPicker';
+import { TimePicker } from '../time/TimePicker';
+import type { TimePickerProps } from '../time/TimePicker';
+import { WheelPicker } from '../wheel/WheelPicker';
+import { EmojiPicker } from '../emoji/EmojiPicker';
+import type { EmojiPickerProps } from '../emoji/EmojiPicker';
+import type { WheelPickerProps } from '../wheel/WheelPicker';
+
+const pad = (children: React.ReactNode, h = 16) => <View style={{ paddingHorizontal: h, paddingBottom: 8 }}>{children}</View>;
+
+// ---------- Date ----------
+
+type DateSheetSelection =
+  | { mode?: 'single'; value?: Date | null; onConfirm: (date: Date) => void }
+  | { mode: 'range'; value?: DateRange; onConfirm: (range: DateRange) => void; minRangeDays?: number; maxRangeDays?: number }
+  | { mode: 'multiple'; value?: Date[]; onConfirm: (dates: Date[]) => void; maxSelections?: number };
+
+export type DatePickerSheetProps = SheetChromeProps &
+  Omit<CalendarBaseProps, 'theme'> &
+  DateSheetSelection & {
+    /** 'calendar' (default) or 'wheel' (single mode only) */
+    display?: 'calendar' | 'wheel';
+    wheelProps?: Partial<DateWheelPickerProps>;
+    /** Single mode: confirm as soon as a day is tapped. Default: false */
+    confirmOnSelect?: boolean;
+  };
+
+export function DatePickerSheet(props: DatePickerSheetProps) {
+  const {
+    visible,
+    onClose,
+    title,
+    confirmLabel,
+    cancelLabel,
+    showCancel,
+    sheetProps,
+    theme,
+    display = 'calendar',
+    wheelProps,
+    confirmOnSelect,
+    mode = 'single',
+    value,
+    onConfirm,
+    ...calendarProps
+  } = props as DatePickerSheetProps & { value?: unknown; onConfirm: (v: unknown) => void };
+  const empty = mode === 'range' ? { start: null, end: null } : mode === 'multiple' ? [] : null;
+  const [draft, setDraft] = useDraft<unknown>(value ?? (display === 'wheel' ? new Date() : empty), visible);
+
+  const ready =
+    mode === 'single' ? draft instanceof Date : mode === 'range' ? !!(draft as DateRange).start && !!(draft as DateRange).end : true;
+  const confirm = () => {
+    if (!ready) return;
+    onConfirm(draft);
+    onClose();
+  };
+
+  return (
+    <PickerSheet
+      visible={visible}
+      onClose={onClose}
+      title={title}
+      confirmLabel={confirmLabel}
+      cancelLabel={cancelLabel}
+      showCancel={showCancel}
+      sheetProps={sheetProps}
+      theme={theme}
+      onConfirm={confirmOnSelect && mode === 'single' && display === 'calendar' ? undefined : confirm}
+      confirmDisabled={!ready}
+    >
+      {display === 'wheel'
+        ? pad(
+            <DateWheelPicker
+              {...wheelProps}
+              locale={calendarProps.locale}
+              minDate={calendarProps.minDate}
+              maxDate={calendarProps.maxDate}
+              theme={theme}
+              value={draft as Date}
+              onChange={setDraft}
+            />
+          )
+        : pad(
+            <Calendar
+              {...(calendarProps as CalendarBaseProps)}
+              theme={theme}
+              {...({
+                mode,
+                value: draft,
+                onChange: (v: unknown) => {
+                  setDraft(v);
+                  if (confirmOnSelect && mode === 'single') {
+                    onConfirm(v);
+                    onClose();
+                  }
+                },
+              } as object)}
+            />,
+            8
+          )}
+    </PickerSheet>
+  );
+}
+
+// ---------- Time ----------
+
+export type TimePickerSheetProps = SheetChromeProps &
+  Omit<TimePickerProps, 'value' | 'defaultValue' | 'onChange' | 'theme'> & {
+    value?: Date;
+    onConfirm: (date: Date) => void;
+  };
+
+export function TimePickerSheet({
+  visible,
+  onClose,
+  title,
+  confirmLabel,
+  cancelLabel,
+  showCancel,
+  sheetProps,
+  theme,
+  value,
+  onConfirm,
+  ...rest
+}: TimePickerSheetProps) {
+  const [draft, setDraft] = useDraft(value ?? new Date(), visible);
+  return (
+    <PickerSheet
+      {...{ visible, onClose, title, confirmLabel, cancelLabel, showCancel, sheetProps, theme }}
+      onConfirm={() => {
+        onConfirm(draft);
+        onClose();
+      }}
+    >
+      {pad(<TimePicker {...rest} theme={theme} value={draft} onChange={setDraft} />)}
+    </PickerSheet>
+  );
+}
+
+// ---------- Generic wheel ----------
+
+export type WheelPickerSheetProps<T> = SheetChromeProps &
+  Omit<WheelPickerProps<T>, 'value' | 'defaultValue' | 'onChange' | 'theme'> & {
+    value?: T;
+    onConfirm: (value: T) => void;
+  };
+
+export function WheelPickerSheet<T>({
+  visible,
+  onClose,
+  title,
+  confirmLabel,
+  cancelLabel,
+  showCancel,
+  sheetProps,
+  theme,
+  value,
+  onConfirm,
+  ...rest
+}: WheelPickerSheetProps<T>) {
+  const first = rest.items[0] as unknown;
+  const firstValue = (first && typeof first === 'object' && 'value' in (first as object) ? (first as { value: T }).value : first) as T;
+  const [draft, setDraft] = useDraft<T>(value ?? firstValue, visible);
+  return (
+    <PickerSheet
+      {...{ visible, onClose, title, confirmLabel, cancelLabel, showCancel, sheetProps, theme }}
+      onConfirm={() => {
+        onConfirm(draft);
+        onClose();
+      }}
+    >
+      {pad(<WheelPicker<T> {...rest} theme={theme} value={draft} onChange={setDraft} />)}
+    </PickerSheet>
+  );
+}
+
+// ---------- Emoji ----------
+
+export type EmojiPickerSheetProps = SheetChromeProps &
+  Omit<EmojiPickerProps, 'theme'> & {
+    /** Close after picking an emoji. Default: true */
+    closeOnSelect?: boolean;
+  };
+
+export function EmojiPickerSheet({
+  visible,
+  onClose,
+  title,
+  confirmLabel,
+  cancelLabel,
+  showCancel = false,
+  sheetProps,
+  theme,
+  closeOnSelect = true,
+  onSelect,
+  height = 420,
+  ...rest
+}: EmojiPickerSheetProps) {
+  return (
+    <PickerSheet {...{ visible, onClose, title, confirmLabel, cancelLabel, showCancel, sheetProps, theme }}>
+      <EmojiPicker
+        {...rest}
+        height={height}
+        theme={theme}
+        onSelect={(ch, e) => {
+          onSelect(ch, e);
+          if (closeOnSelect) onClose();
+        }}
+      />
+    </PickerSheet>
+  );
+}

package/src/theme.tsx

@@ -0,0 +1,160 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import { useColorScheme } from 'react-native';
+import type { TextStyle } from 'react-native';
+
+export interface PickerTheme {
+  dark: boolean;
+  colors: {
+    /** Picker surface background */
+    background: string;
+    /** Secondary surfaces: search inputs, chips, hovered rows */
+    surface: string;
+    /** Bottom sheet background */
+    sheet: string;
+    text: string;
+    textSecondary: string;
+    textDisabled: string;
+    primary: string;
+    onPrimary: string;
+    /** Soft primary tint: range fill, selected row background */
+    primaryMuted: string;
+    border: string;
+    backdrop: string;
+    /** Wheel selection band */
+    indicator: string;
+    handle: string;
+  };
+  radius: { sm: number; md: number; lg: number; full: number; sheet: number };
+  spacing: { xs: number; sm: number; md: number; lg: number; xl: number };
+  typography: {
+    fontFamily?: string;
+    fontFamilyMedium?: string;
+    sizes: { xs: number; sm: number; md: number; lg: number; xl: number };
+    weights: { regular: TextStyle['fontWeight']; medium: TextStyle['fontWeight']; bold: TextStyle['fontWeight'] };
+  };
+  animation: { duration: number };
+}
+
+const shared = {
+  radius: { sm: 8, md: 12, lg: 16, full: 999, sheet: 24 },
+  spacing: { xs: 4, sm: 8, md: 12, lg: 16, xl: 24 },
+  typography: {
+    sizes: { xs: 11, sm: 13, md: 16, lg: 19, xl: 22 },
+    weights: { regular: '400', medium: '500', bold: '600' } as PickerTheme['typography']['weights'],
+  },
+  animation: { duration: 240 },
+};
+
+export const lightTheme: PickerTheme = {
+  dark: false,
+  colors: {
+    background: '#FFFFFF',
+    surface: '#F2F3F7',
+    sheet: '#FFFFFF',
+    text: '#14151A',
+    textSecondary: '#6B6F7B',
+    textDisabled: '#B9BCC6',
+    primary: '#4F46E5',
+    onPrimary: '#FFFFFF',
+    primaryMuted: 'rgba(79,70,229,0.12)',
+    border: '#E6E7EC',
+    backdrop: 'rgba(10,11,16,0.45)',
+    indicator: 'rgba(20,21,26,0.06)',
+    handle: '#D5D7DE',
+  },
+  ...shared,
+};
+
+export const darkTheme: PickerTheme = {
+  dark: true,
+  colors: {
+    background: '#16171C',
+    surface: '#22242B',
+    sheet: '#1B1C22',
+    text: '#F3F4F7',
+    textSecondary: '#9A9EAA',
+    textDisabled: '#4E515B',
+    primary: '#8B85FF',
+    onPrimary: '#0E0E14',
+    primaryMuted: 'rgba(139,133,255,0.18)',
+    border: '#2C2E36',
+    backdrop: 'rgba(0,0,0,0.6)',
+    indicator: 'rgba(255,255,255,0.07)',
+    handle: '#3A3D47',
+  },
+  ...shared,
+};
+
+export type DeepPartial<T> = {
+  [K in keyof T]?: T[K] extends object ? (T[K] extends Function ? T[K] : DeepPartial<T[K]>) : T[K];
+};
+
+function isPlainObject(v: unknown): v is Record<string, unknown> {
+  return typeof v === 'object' && v !== null && !Array.isArray(v);
+}
+
+export function mergeTheme<T>(base: T, override?: DeepPartial<T>): T {
+  if (!override) return base;
+  const out: Record<string, unknown> = { ...(base as Record<string, unknown>) };
+  for (const key of Object.keys(override)) {
+    const o = (override as Record<string, unknown>)[key];
+    const b = out[key];
+    out[key] = isPlainObject(o) && isPlainObject(b) ? mergeTheme(b, o as DeepPartial<typeof b>) : o;
+  }
+  return out as T;
+}
+
+/** Build a full theme from overrides on top of the light (or dark) base. */
+export function createTheme(overrides: DeepPartial<PickerTheme>, base?: PickerTheme): PickerTheme {
+  return mergeTheme(base ?? (overrides.dark ? darkTheme : lightTheme), overrides);
+}
+
+interface ProviderValue {
+  light: PickerTheme;
+  dark: PickerTheme;
+  colorScheme: 'auto' | 'light' | 'dark';
+}
+
+const ThemeContext = createContext<ProviderValue | null>(null);
+
+export interface PickersProviderProps {
+  children: React.ReactNode;
+  /** 'auto' follows the OS appearance. Default: 'auto' */
+  colorScheme?: 'auto' | 'light' | 'dark';
+  /** Overrides applied to the light theme (or a full theme) */
+  theme?: DeepPartial<PickerTheme>;
+  /** Overrides applied to the dark theme */
+  darkTheme?: DeepPartial<PickerTheme>;
+}
+
+export function PickersProvider({ children, colorScheme = 'auto', theme, darkTheme: dark }: PickersProviderProps) {
+  const value = useMemo<ProviderValue>(
+    () => ({
+      light: mergeTheme(lightTheme, theme),
+      dark: mergeTheme(darkTheme, dark ?? theme),
+      colorScheme,
+    }),
+    [theme, dark, colorScheme]
+  );
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+/** Resolves the active theme, applying a component-level override if given. */
+export function usePickerTheme(override?: DeepPartial<PickerTheme>): PickerTheme {
+  const ctx = useContext(ThemeContext);
+  const system = useColorScheme();
+  const scheme = ctx?.colorScheme ?? 'auto';
+  const isDark = scheme === 'auto' ? system === 'dark' : scheme === 'dark';
+  const base = isDark ? ctx?.dark ?? darkTheme : ctx?.light ?? lightTheme;
+  return useMemo(() => mergeTheme(base, override), [base, override]);
+}
+
+/** Text style helper used across components. */
+export function textStyle(theme: PickerTheme, size: keyof PickerTheme['typography']['sizes'], weight: 'regular' | 'medium' | 'bold' = 'regular'): TextStyle {
+  return {
+    fontSize: theme.typography.sizes[size],
+    fontWeight: theme.typography.weights[weight],
+    fontFamily: weight === 'regular' ? theme.typography.fontFamily : theme.typography.fontFamilyMedium ?? theme.typography.fontFamily,
+    color: theme.colors.text,
+  };
+}

package/src/time/TimePicker.tsx

@@ -0,0 +1,199 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { MultiWheelPicker } from '../wheel/MultiWheelPicker';
+import type { MultiWheelSlot } from '../wheel/MultiWheelPicker';
+import type { WheelColumn, } from '../wheel/MultiWheelPicker';
+import type { WheelItem } from '../wheel/WheelPicker';
+import { getDayPeriods, uses12HourClock } from '../utils/date';
+import type { SlotStyles, ThemableProps } from '../types';
+
+export interface TimePickerProps extends ThemableProps {
+  /** Selected time (the date part is preserved). */
+  value?: Date;
+  defaultValue?: Date;
+  onChange?: (date: Date) => void;
+  /** Fires on every tick while scrolling (for haptics). */
+  onValueChanging?: (date: Date) => void;
+  /** Default: 'auto' (from locale) */
+  format?: '12h' | '24h' | 'auto';
+  locale?: string;
+  /** Minute step: 1, 5, 15... Default: 1 */
+  minuteInterval?: number;
+  showSeconds?: boolean;
+  secondInterval?: number;
+  /** Earliest selectable time of day */
+  minTime?: Date;
+  /** Latest selectable time of day */
+  maxTime?: Date;
+  /** Infinite hour/minute wheels. Default: true */
+  loop?: boolean;
+  /** Zero-pad hours. Default: true for 24h, false for 12h */
+  padHours?: boolean;
+  /** Labels for AM/PM. Default: from locale */
+  dayPeriodLabels?: [string, string];
+  /** Put AM/PM before the hours (e.g. zh, ko). Default: false */
+  dayPeriodFirst?: boolean;
+  /** Separator between columns. Default: ':' */
+  separator?: React.ReactNode;
+  itemHeight?: number;
+  visibleItems?: number;
+  variant?: '3d' | 'flat';
+  style?: StyleProp<ViewStyle>;
+  styles?: SlotStyles<MultiWheelSlot>;
+  testID?: string;
+}
+
+const pad2 = (n: number) => String(n).padStart(2, '0');
+const range = (count: number, step = 1) => Array.from({ length: Math.ceil(count / step) }, (_, i) => i * step);
+const secondsOfDay = (d: Date) => d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds();
+
+export function TimePicker({
+  value,
+  defaultValue,
+  onChange,
+  onValueChanging,
+  format = 'auto',
+  locale,
+  minuteInterval = 1,
+  showSeconds = false,
+  secondInterval = 1,
+  minTime,
+  maxTime,
+  loop = true,
+  padHours,
+  dayPeriodLabels,
+  dayPeriodFirst = false,
+  separator = ':',
+  itemHeight,
+  visibleItems,
+  variant,
+  style,
+  styles,
+  theme,
+  testID,
+}: TimePickerProps) {
+  const [inner, setInner] = useState<Date>(() => value ?? defaultValue ?? new Date());
+  const date = value ?? inner;
+  const is12 = format === 'auto' ? uses12HourClock(locale) : format === '12h';
+  const periods = useMemo(() => dayPeriodLabels ?? getDayPeriods(locale), [dayPeriodLabels, locale]);
+  const padH = padHours ?? !is12;
+
+  const h24 = date.getHours();
+  const minute = Math.floor(date.getMinutes() / minuteInterval) * minuteInterval;
+  const second = Math.floor(date.getSeconds() / secondInterval) * secondInterval;
+  const isPM = h24 >= 12;
+
+  const minS = minTime ? secondsOfDay(minTime) : 0;
+  const maxS = maxTime ? secondsOfDay(maxTime) : 86399;
+
+  const build = useCallback(
+    (patch: { h24?: number; m?: number; s?: number }) => {
+      const d = new Date(date);
+      d.setHours(patch.h24 ?? h24, patch.m ?? minute, showSeconds ? patch.s ?? second : 0, 0);
+      return d;
+    },
+    [date, h24, minute, second, showSeconds]
+  );
+
+  const commit = useCallback(
+    (d: Date) => {
+      // Clamp to [minTime, maxTime]
+      const sec = secondsOfDay(d);
+      if (sec < minS || sec > maxS) {
+        const target = sec < minS ? minS : maxS;
+        d = new Date(d);
+        d.setHours(Math.floor(target / 3600), Math.floor((target % 3600) / 60), showSeconds ? target % 60 : 0, 0);
+      }
+      if (value === undefined) setInner(d);
+      onChange?.(d);
+    },
+    [maxS, minS, onChange, showSeconds, value]
+  );
+
+  const columns = useMemo(() => {
+    const cols: WheelColumn[] = [];
+    const hourOutOfRange = (h: number) => h * 3600 + 3599 < minS || h * 3600 > maxS;
+    const hourItems: WheelItem<number>[] = is12
+      ? range(12).map((i) => {
+          const display = i === 0 ? 12 : i;
+          const real = (isPM ? 12 : 0) + i;
+          return { value: i, label: padH ? pad2(display) : String(display), disabled: hourOutOfRange(real) };
+        })
+      : range(24).map((h) => ({ value: h, label: padH ? pad2(h) : String(h), disabled: hourOutOfRange(h) }));
+
+    const minuteItems: WheelItem<number>[] = range(60, minuteInterval).map((m) => {
+      const t = h24 * 3600 + m * 60;
+      return { value: m, label: pad2(m), disabled: t + 59 < minS || t > maxS };
+    });
+
+    const toH24 = (hv: number, pm: boolean) => (is12 ? (pm ? 12 : 0) + hv : hv);
+    const mk = (pick: (v: number) => Date) => ({
+      onChange: (v: number) => commit(pick(v)),
+      onValueChanging: onValueChanging ? (v: number) => onValueChanging(pick(v)) : undefined,
+    });
+
+    const periodCol: WheelColumn<number> = {
+      key: 'period',
+      items: [
+        { value: 0, label: periods[0], disabled: minS >= 12 * 3600 },
+        { value: 1, label: periods[1], disabled: maxS < 12 * 3600 },
+      ],
+      value: isPM ? 1 : 0,
+      flex: 1,
+      ...mk((v) => build({ h24: (h24 % 12) + (v ? 12 : 0) })),
+    };
+
+    if (is12 && dayPeriodFirst) cols.push(periodCol);
+    cols.push({
+      key: 'hour',
+      items: hourItems,
+      value: is12 ? h24 % 12 : h24,
+      loop,
+      flex: 1,
+      ...mk((v) => build({ h24: toH24(v, isPM) })),
+    });
+    cols.push({
+      key: 'minute',
+      items: minuteItems,
+      value: minute,
+      loop,
+      flex: 1,
+      ...mk((v) => build({ m: v })),
+    });
+    if (showSeconds) {
+      cols.push({
+        key: 'second',
+        items: range(60, secondInterval).map((sv) => ({ value: sv, label: pad2(sv) })),
+        value: second,
+        loop,
+        flex: 1,
+        ...mk((v) => build({ s: v })),
+      });
+    }
+    if (is12 && !dayPeriodFirst) cols.push(periodCol);
+    return cols;
+  }, [build, commit, dayPeriodFirst, h24, is12, isPM, loop, maxS, minS, minute, minuteInterval, onValueChanging, padH, periods, second, secondInterval, showSeconds]);
+
+  const sep = useCallback(
+    (left: number) => {
+      const leftKey = columns[left]?.key;
+      const rightKey = columns[left + 1]?.key;
+      return leftKey === 'period' || rightKey === 'period' ? null : separator;
+    },
+    [columns, separator]
+  );
+
+  return (
+    <MultiWheelPicker
+      columns={columns}
+      separator={sep}
+      itemHeight={itemHeight}
+      visibleItems={visibleItems}
+      variant={variant}
+      style={style}
+      styles={styles}
+      theme={theme}
+      testID={testID}
+    />
+  );
+}

package/src/types.ts

@@ -0,0 +1,10 @@
+import type { StyleProp, TextStyle } from 'react-native';
+import type { DeepPartial, PickerTheme } from './theme';
+
+/** Per-slot style overrides. Every component exposes its own slot names. */
+export type SlotStyles<K extends string> = Partial<Record<K, StyleProp<TextStyle>>>;
+
+export interface ThemableProps {
+  /** Component-level theme override, merged on top of the provider theme */
+  theme?: DeepPartial<PickerTheme>;
+}

package/src/utils/OwnScroll.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ScrollView } from 'react-native';
+
+// Absent on react-native-web.
+const ParentScrollContext = (ScrollView as unknown as { Context?: React.Context<unknown> }).Context;
+
+/**
+ * Wraps a fixed-height list that scrolls on its own. Its windowing never depends on an outer
+ * ScrollView, so hiding that parent silences VirtualizedList's "should never be nested" warning
+ * (the context is only read for that warning).
+ */
+export function OwnScroll({ children }: { children: React.ReactNode }) {
+  return ParentScrollContext ? <ParentScrollContext.Provider value={null}>{children}</ParentScrollContext.Provider> : <>{children}</>;
+}