react-native-month-day-picker 0.1.0

package/lib/typescript/hooks/useBirthdayPicker.d.ts

@@ -0,0 +1,17 @@
+import type { UseBirthdayPickerOptions, UseBirthdayPickerReturn } from '../types';
+/**
+ * Hook for managing birthday picker state
+ *
+ * @param options - Configuration options
+ * @returns State and handlers for birthday picker
+ *
+ * @example
+ * ```tsx
+ * const { value, setMonth, setDay, daysInMonth } = useBirthdayPicker({
+ *   initialValue: { month: 6, day: 15 },
+ * });
+ * ```
+ */
+export declare function useBirthdayPicker(options?: UseBirthdayPickerOptions): UseBirthdayPickerReturn;
+export default useBirthdayPicker;
+//# sourceMappingURL=useBirthdayPicker.d.ts.map

package/lib/typescript/hooks/useBirthdayPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBirthdayPicker.d.ts","sourceRoot":"","sources":["../../../src/hooks/useBirthdayPicker.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,wBAAwB,EACxB,uBAAuB,EACxB,MAAM,UAAU,CAAC;AASlB;;;;;;;;;;;;GAYG;AACH,wBAAgB,iBAAiB,CAC/B,OAAO,GAAE,wBAA6B,GACrC,uBAAuB,CA0EzB;AAED,eAAe,iBAAiB,CAAC"}

package/lib/typescript/index.d.ts

@@ -0,0 +1,8 @@
+export { BirthdayPicker } from './BirthdayPicker';
+export { BirthdayPickerModal } from './BirthdayPickerModal';
+export { useBirthdayPicker } from './hooks/useBirthdayPicker';
+export type { BirthdayValue, MonthFormat, BirthdayPickerProps, BirthdayPickerModalProps, UseBirthdayPickerOptions, UseBirthdayPickerReturn, } from './types';
+export { getDaysInMonth, clampDay, isValidBirthday, getDaysArray, getMonthsArray, normalizeBirthday, } from './utils/dateUtils';
+export { getMonthNames, formatMonth, formatDay } from './utils/localeUtils';
+export { BirthdayPicker as default } from './BirthdayPicker';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAG9D,YAAY,EACV,aAAa,EACb,WAAW,EACX,mBAAmB,EACnB,wBAAwB,EACxB,wBAAwB,EACxB,uBAAuB,GACxB,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,cAAc,EACd,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,cAAc,EACd,iBAAiB,GAClB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAG5E,OAAO,EAAE,cAAc,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC"}

package/lib/typescript/types.d.ts

@@ -0,0 +1,160 @@
+import type { ViewStyle } from 'react-native';
+/**
+ * Represents a month-day birthday value without year.
+ * Month is 1-indexed (1 = January, 12 = December)
+ * Day is 1-indexed (1-31 depending on month)
+ */
+export type BirthdayValue = {
+    month: number;
+    day: number;
+};
+/**
+ * Format for displaying month names
+ */
+export type MonthFormat = 'long' | 'short' | 'numeric';
+/**
+ * Props for the BirthdayPicker component
+ */
+export interface BirthdayPickerProps {
+    /**
+     * Current value (controlled mode)
+     */
+    value?: BirthdayValue;
+    /**
+     * Default value (uncontrolled mode)
+     */
+    defaultValue?: BirthdayValue;
+    /**
+     * Called when value changes
+     */
+    onChange?: (value: BirthdayValue) => void;
+    /**
+     * BCP 47 locale string for month name formatting
+     * @default 'en-US'
+     */
+    locale?: string;
+    /**
+     * How to format month names
+     * @default 'long'
+     */
+    monthFormat?: MonthFormat;
+    /**
+     * Whether to allow Feb 29 as a valid birthday
+     * @default true
+     */
+    allowLeapDay?: boolean;
+    /**
+     * Disable interaction
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Test ID for testing
+     */
+    testID?: string;
+    /**
+     * Container style
+     */
+    style?: ViewStyle;
+    /**
+     * Height of each item in the wheel
+     * @default 40
+     */
+    itemHeight?: number;
+    /**
+     * Number of visible items in each wheel (must be odd)
+     * @default 5
+     */
+    visibleItems?: number;
+    /**
+     * Accessibility label for month picker
+     * @default 'Month picker'
+     */
+    monthAccessibilityLabel?: string;
+    /**
+     * Accessibility label for day picker
+     * @default 'Day picker'
+     */
+    dayAccessibilityLabel?: string;
+}
+/**
+ * Props for the BirthdayPickerModal component
+ */
+export interface BirthdayPickerModalProps extends BirthdayPickerProps {
+    /**
+     * Whether the modal is visible
+     */
+    visible: boolean;
+    /**
+     * Called when user confirms selection
+     */
+    onConfirm: (value: BirthdayValue) => void;
+    /**
+     * Called when user cancels
+     */
+    onCancel: () => void;
+    /**
+     * Modal title
+     * @default 'Select Birthday'
+     */
+    title?: string;
+    /**
+     * Confirm button text
+     * @default 'Confirm'
+     */
+    confirmText?: string;
+    /**
+     * Cancel button text
+     * @default 'Cancel'
+     */
+    cancelText?: string;
+    /**
+     * Animation type for modal presentation
+     * @default 'slide'
+     */
+    animationType?: 'slide' | 'fade' | 'none';
+}
+/**
+ * Options for useBirthdayPicker hook
+ */
+export interface UseBirthdayPickerOptions {
+    /**
+     * Initial value
+     */
+    initialValue?: BirthdayValue;
+    /**
+     * Whether to allow Feb 29
+     * @default true
+     */
+    allowLeapDay?: boolean;
+}
+/**
+ * Return type of useBirthdayPicker hook
+ */
+export interface UseBirthdayPickerReturn {
+    /**
+     * Current birthday value
+     */
+    value: BirthdayValue;
+    /**
+     * Set the month (will clamp day if needed)
+     */
+    setMonth: (month: number) => void;
+    /**
+     * Set the day
+     */
+    setDay: (day: number) => void;
+    /**
+     * Set the entire value
+     */
+    setValue: (value: BirthdayValue) => void;
+    /**
+     * Number of days in the currently selected month
+     */
+    daysInMonth: number;
+    /**
+     * Whether the current value is valid
+     */
+    isValid: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AAEvD;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;OAEG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAE1C;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAE1B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IAEjC;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED;;GAEG;AACH,MAAM,WAAW,wBAAyB,SAAQ,mBAAmB;IACnE;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,SAAS,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAE1C;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IAErB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;CAC3C;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC;;OAEG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAE7B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,KAAK,EAAE,aAAa,CAAC;IAErB;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC;;OAEG;IACH,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAE9B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAEzC;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB"}

package/lib/typescript/utils/dateUtils.d.ts

@@ -0,0 +1,43 @@
+import type { BirthdayValue } from '../types';
+/**
+ * Get the number of days in a given month
+ * @param month - Month (1-12)
+ * @param allowLeapDay - Whether to allow Feb 29
+ * @returns Number of days in the month
+ */
+export declare function getDaysInMonth(month: number, allowLeapDay?: boolean): number;
+/**
+ * Clamp a day value to be valid for a given month
+ * @param day - Day to clamp
+ * @param month - Month (1-12)
+ * @param allowLeapDay - Whether to allow Feb 29
+ * @returns Clamped day value
+ */
+export declare function clampDay(day: number, month: number, allowLeapDay?: boolean): number;
+/**
+ * Check if a birthday value is valid
+ * @param value - Birthday value to validate
+ * @param allowLeapDay - Whether to allow Feb 29
+ * @returns Whether the value is valid
+ */
+export declare function isValidBirthday(value: BirthdayValue, allowLeapDay?: boolean): boolean;
+/**
+ * Generate an array of day numbers for a given month
+ * @param month - Month (1-12)
+ * @param allowLeapDay - Whether to allow Feb 29
+ * @returns Array of day numbers [1, 2, 3, ..., n]
+ */
+export declare function getDaysArray(month: number, allowLeapDay?: boolean): number[];
+/**
+ * Generate an array of month numbers
+ * @returns Array of month numbers [1, 2, 3, ..., 12]
+ */
+export declare function getMonthsArray(): number[];
+/**
+ * Normalize a birthday value to ensure it's valid
+ * @param value - Birthday value to normalize
+ * @param allowLeapDay - Whether to allow Feb 29
+ * @returns Normalized birthday value
+ */
+export declare function normalizeBirthday(value: BirthdayValue, allowLeapDay?: boolean): BirthdayValue;
+//# sourceMappingURL=dateUtils.d.ts.map

package/lib/typescript/utils/dateUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dateUtils.d.ts","sourceRoot":"","sources":["../../../src/utils/dateUtils.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,YAAY,UAAO,GAAG,MAAM,CAUzE;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CACtB,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,MAAM,EACb,YAAY,UAAO,GAClB,MAAM,CAGR;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,aAAa,EACpB,YAAY,UAAO,GAClB,OAAO,CAeT;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,YAAY,UAAO,GAAG,MAAM,EAAE,CAGzE;AAED;;;GAGG;AACH,wBAAgB,cAAc,IAAI,MAAM,EAAE,CAEzC;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,aAAa,EACpB,YAAY,UAAO,GAClB,aAAa,CAIf"}

package/lib/typescript/utils/localeUtils.d.ts

@@ -0,0 +1,28 @@
+import type { MonthFormat } from '../types';
+/**
+ * Get month names for a given locale and format
+ * @param locale - BCP 47 locale string (e.g., 'en-US', 'ja-JP')
+ * @param format - Format for month names ('long', 'short', 'numeric')
+ * @returns Array of month names/numbers (1-indexed, index 0 is empty string)
+ */
+export declare function getMonthNames(locale?: string, format?: MonthFormat): string[];
+/**
+ * Format a single month number to a localized string
+ * @param month - Month number (1-12)
+ * @param locale - BCP 47 locale string
+ * @param format - Format for month name
+ * @returns Formatted month name
+ */
+export declare function formatMonth(month: number, locale?: string, format?: MonthFormat): string;
+/**
+ * Format a day number with optional locale-specific formatting
+ * @param day - Day number (1-31)
+ * @param locale - BCP 47 locale string (currently unused, for future i18n)
+ * @returns Formatted day string
+ */
+export declare function formatDay(day: number, locale?: string): string;
+/**
+ * Clear the month names cache (useful for testing)
+ */
+export declare function clearMonthNamesCache(): void;
+//# sourceMappingURL=localeUtils.d.ts.map

package/lib/typescript/utils/localeUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"localeUtils.d.ts","sourceRoot":"","sources":["../../../src/utils/localeUtils.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAc5C;;;;;GAKG;AACH,wBAAgB,aAAa,CAC3B,MAAM,GAAE,MAAuB,EAC/B,MAAM,GAAE,WAAkC,GACzC,MAAM,EAAE,CA8BV;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CACzB,KAAK,EAAE,MAAM,EACb,MAAM,GAAE,MAAuB,EAC/B,MAAM,GAAE,WAAkC,GACzC,MAAM,CAOR;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CACvB,GAAG,EAAE,MAAM,EACX,MAAM,GAAE,MAAuB,GAC9B,MAAM,CAER;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,IAAI,CAE3C"}

package/package.json

@@ -0,0 +1,137 @@
+{
+  "name": "react-native-month-day-picker",
+  "version": "0.1.0",
+  "description": "A privacy-friendly birthday picker for React Native that uses only month and day (no year)",
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index.ts",
+  "source": "src/index.ts",
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
+  ],
+  "scripts": {
+    "build": "bob build",
+    "clean": "del-cli lib",
+    "prepare": "node scripts/prepare.js",
+    "test": "jest --watchman=false",
+    "test:watch": "jest --watch --watchman=false",
+    "test:coverage": "jest --coverage --watchman=false",
+    "lint": "eslint \"src/**/*.{ts,tsx}\"",
+    "lint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "typecheck": "tsc --noEmit",
+    "check": "npm run lint && npm run typecheck && npm run test",
+    "example": "cd example && npm start"
+  },
+  "keywords": [
+    "react-native",
+    "birthday",
+    "picker",
+    "month",
+    "day",
+    "date",
+    "wheel-picker",
+    "expo"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mpadel78/react-native-month-day-picker.git"
+  },
+  "author": "mpadel78",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mpadel78/react-native-month-day-picker/issues"
+  },
+  "homepage": "https://github.com/mpadel78/react-native-month-day-picker#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "@quidone/react-native-wheel-picker": "^1.3.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.0",
+    "@babel/preset-env": "^7.24.0",
+    "@babel/preset-react": "^7.24.0",
+    "@babel/preset-typescript": "^7.24.0",
+    "@testing-library/react-native": "^12.4.0",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.2.0",
+    "@types/react-native": "^0.72.8",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
+    "del-cli": "^5.1.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react": "^7.34.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^9.1.7",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "lint-staged": "^17.0.5",
+    "prettier": "^3.8.3",
+    "react": "18.2.0",
+    "react-native": "0.74.0",
+    "react-native-builder-bob": "^0.23.0",
+    "react-test-renderer": "18.2.0",
+    "typescript": "^5.4.0"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-native": ">=0.64.0",
+    "react-native-gesture-handler": ">=2.0.0",
+    "react-native-reanimated": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native-gesture-handler": {
+      "optional": false
+    },
+    "react-native-reanimated": {
+      "optional": false
+    }
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "eslintConfig": {
+    "root": true,
+    "parser": "@typescript-eslint/parser",
+    "plugins": [
+      "@typescript-eslint",
+      "react",
+      "react-hooks"
+    ],
+    "extends": [
+      "eslint:recommended",
+      "plugin:@typescript-eslint/recommended",
+      "plugin:react/recommended",
+      "plugin:react-hooks/recommended",
+      "prettier"
+    ],
+    "settings": {
+      "react": {
+        "version": "detect"
+      }
+    },
+    "rules": {
+      "react/react-in-jsx-scope": "off"
+    }
+  }
+}

package/src/BirthdayPicker.tsx

@@ -0,0 +1,210 @@
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { View, StyleSheet } from 'react-native';
+import WheelPicker from '@quidone/react-native-wheel-picker';
+import type { BirthdayPickerProps, BirthdayValue } from './types';
+import {
+  DEFAULT_BIRTHDAY_VALUE,
+  DEFAULT_LOCALE,
+  DEFAULT_MONTH_FORMAT,
+  DEFAULT_ITEM_HEIGHT,
+  DEFAULT_VISIBLE_ITEMS,
+} from './constants';
+import {
+  getDaysArray,
+  getMonthsArray,
+  clampDay,
+  getDaysInMonth,
+} from './utils/dateUtils';
+import { getMonthNames, formatDay } from './utils/localeUtils';
+
+/**
+ * Item type for wheel picker
+ */
+interface WheelItem {
+  value: number;
+  label: string;
+}
+
+/**
+ * A birthday picker component that allows selecting month and day.
+ * Does not include year for privacy-friendly birthday selection.
+ *
+ * @example
+ * ```tsx
+ * // Uncontrolled mode
+ * <BirthdayPicker
+ *   defaultValue={{ month: 6, day: 15 }}
+ *   onChange={(value) => console.log(value)}
+ * />
+ *
+ * // Controlled mode
+ * const [birthday, setBirthday] = useState({ month: 1, day: 1 });
+ * <BirthdayPicker
+ *   value={birthday}
+ *   onChange={setBirthday}
+ * />
+ * ```
+ */
+export function BirthdayPicker({
+  value: controlledValue,
+  defaultValue = DEFAULT_BIRTHDAY_VALUE,
+  onChange,
+  locale = DEFAULT_LOCALE,
+  monthFormat = DEFAULT_MONTH_FORMAT,
+  allowLeapDay = true,
+  disabled = false,
+  testID,
+  style,
+  itemHeight = DEFAULT_ITEM_HEIGHT,
+  visibleItems = DEFAULT_VISIBLE_ITEMS,
+  monthAccessibilityLabel = 'Month picker',
+  dayAccessibilityLabel = 'Day picker',
+}: BirthdayPickerProps): React.ReactElement {
+  // Determine if we're in controlled or uncontrolled mode
+  const isControlled = controlledValue !== undefined;
+
+  // Internal state for uncontrolled mode
+  const [internalValue, setInternalValue] = React.useState<BirthdayValue>(
+    () => controlledValue ?? defaultValue
+  );
+
+  // The actual value to display
+  const value = isControlled ? controlledValue : internalValue;
+
+  // Track previous month to detect changes for day clamping
+  const prevMonthRef = useRef(value.month);
+
+  // Get month names based on locale and format
+  const monthNames = useMemo(
+    () => getMonthNames(locale, monthFormat),
+    [locale, monthFormat]
+  );
+
+  // Generate month items for wheel picker
+  const monthItems: WheelItem[] = useMemo(() => {
+    return getMonthsArray().map((month) => ({
+      value: month,
+      label: monthNames[month],
+    }));
+  }, [monthNames]);
+
+  // Generate day items based on selected month
+  const dayItems: WheelItem[] = useMemo(() => {
+    return getDaysArray(value.month, allowLeapDay).map((day) => ({
+      value: day,
+      label: formatDay(day, locale),
+    }));
+  }, [value.month, allowLeapDay, locale]);
+
+  // Handle internal value changes
+  const handleValueChange = useCallback(
+    (newValue: BirthdayValue) => {
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onChange?.(newValue);
+    },
+    [isControlled, onChange]
+  );
+
+  // Handle month change
+  const handleMonthChange = useCallback(
+    ({ item }: { item: WheelItem }) => {
+      const newMonth = item.value;
+      const clampedDay = clampDay(value.day, newMonth, allowLeapDay);
+
+      const newValue: BirthdayValue = {
+        month: newMonth,
+        day: clampedDay,
+      };
+
+      handleValueChange(newValue);
+    },
+    [value.day, allowLeapDay, handleValueChange]
+  );
+
+  // Handle day change
+  const handleDayChange = useCallback(
+    ({ item }: { item: WheelItem }) => {
+      const newValue: BirthdayValue = {
+        month: value.month,
+        day: item.value,
+      };
+
+      handleValueChange(newValue);
+    },
+    [value.month, handleValueChange]
+  );
+
+  // Sync internal state when controlled value changes
+  useEffect(() => {
+    if (isControlled && controlledValue) {
+      setInternalValue(controlledValue);
+    }
+  }, [isControlled, controlledValue]);
+
+  // Clamp day when month changes and day exceeds max days
+  useEffect(() => {
+    if (value.month !== prevMonthRef.current) {
+      const maxDays = getDaysInMonth(value.month, allowLeapDay);
+      if (value.day > maxDays) {
+        const clampedValue: BirthdayValue = {
+          month: value.month,
+          day: maxDays,
+        };
+        handleValueChange(clampedValue);
+      }
+      prevMonthRef.current = value.month;
+    }
+  }, [value.month, value.day, allowLeapDay, handleValueChange]);
+
+  return (
+    <View
+      style={[styles.container, style]}
+      testID={testID}
+      pointerEvents={disabled ? 'none' : 'auto'}
+      accessibilityRole="adjustable"
+    >
+      <View
+        style={styles.pickerContainer}
+        accessibilityLabel={monthAccessibilityLabel}
+      >
+        <WheelPicker
+          data={monthItems}
+          value={value.month}
+          onValueChanged={handleMonthChange}
+          itemHeight={itemHeight}
+          visibleItemCount={visibleItems}
+          testID={testID ? `${testID}-month` : undefined}
+        />
+      </View>
+
+      <View
+        style={styles.pickerContainer}
+        accessibilityLabel={dayAccessibilityLabel}
+      >
+        <WheelPicker
+          data={dayItems}
+          value={value.day}
+          onValueChanged={handleDayChange}
+          itemHeight={itemHeight}
+          visibleItemCount={visibleItems}
+          testID={testID ? `${testID}-day` : undefined}
+        />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  pickerContainer: {
+    flex: 1,
+  },
+});
+
+export default BirthdayPicker;