react-native-smart-date-picker 0.1.0

package/README.md

@@ -0,0 +1,163 @@
+# react-native-smart-date-picker
+
+A lightweight, customizable React Native wheel-style date and datetime picker with a consistent UI on iOS and Android.
+
+## Features
+
+- Wheel columns for day, month, year, hour, and minute
+- Modes: `date`, `time`, `datetime` (date then time)
+- Optional center selection overlay row
+- Initial value support and min/max date clamping
+- Theme and style customization via props
+- Custom row height with `itemHeight`
+
+## Installation
+
+Install in your React Native project:
+
+```bash
+npm install react-native-smart-date-picker
+```
+
+Peer dependencies: `react` and `react-native` (see package.json).
+
+## Usage
+
+Basic example (date then time flow):
+
+```jsx
+import React, { useState } from 'react';
+import SmartDatePicker from 'react-native-smart-date-picker';
+
+function Example() {
+	const [pickerVisible, setPickerVisible] = useState(false);
+	const [selectedDate, setSelectedDate] = useState(new Date());
+
+	return (
+		<>
+			<Button title="Open" onPress={() => setPickerVisible(true)} />
+
+			<SmartDatePicker
+				visible={pickerVisible}
+				value={selectedDate}
+				mode="datetime" // "date" | "time" | "datetime"
+				onCancel={() => setPickerVisible(false)}
+				onConfirm={(date) => {
+					setSelectedDate(date);
+					setPickerVisible(false);
+					console.log('Selected Date:', date);
+				}}
+			/>
+		</>
+	);
+}
+```
+
+### Time-only example
+
+```jsx
+<SmartDatePicker visible={true} mode="time" onConfirm={...} onCancel={...} />
+```
+
+### Date-only example
+
+```jsx
+<SmartDatePicker visible={true} mode="date" onConfirm={...} onCancel={...} />
+```
+
+### Theme example
+
+```jsx
+<SmartDatePicker
+	visible={pickerVisible}
+	value={selectedDate}
+	mode="datetime"
+	theme={{
+		primaryColor: '#0f766e',
+		backgroundColor: '#f8fafc',
+		wheelBackgroundColor: '#ffffff',
+		textColor: '#111827',
+		buttonTextColor: '#0f766e',
+	}}
+	onCancel={() => setPickerVisible(false)}
+	onConfirm={(date) => {
+		setSelectedDate(date);
+		setPickerVisible(false);
+	}}
+/>
+```
+
+## Behavior
+
+- In `datetime` mode, the picker shows the date wheels first and then transitions to time selection.
+- In `date` mode, the picker renders day/month/year wheels only.
+- In `time` mode, the picker renders hour/minute wheels only.
+- `value` is clamped to `minimumDate` / `maximumDate` before confirmation.
+- `showSelectionOverlay` defaults to `true` and renders a centered highlight bar.
+- The modal slides up from the bottom using React Native `Modal`.
+
+## Props
+
+### Required
+
+- `visible: boolean` — whether the picker is visible
+- `onConfirm: (date: Date) => void` — called when the user taps Done
+- `onCancel: () => void` — called when the user taps Cancel
+
+### Core picker props
+
+- `mode?: 'date' | 'time' | 'datetime'` — which wheel UI to show (default: `datetime`)
+- `value?: Date` — initial selected date/time (defaults to `new Date()`)
+- `minimumDate?: Date` — earliest selectable date/time
+- `maximumDate?: Date` — latest selectable date/time
+- `showSelectionOverlay?: boolean` — display the center selection overlay row (default: `true`)
+- `itemHeight?: number` — custom row height for wheel items
+
+### Theme and styling
+
+- `theme?: Partial<SmartDatePickerTheme>` — partial theme object for colors
+- `customTheme?: SmartDatePickerTheme` — full theme object replacing default theme values
+- `minDateTheme?: Partial<SmartDatePickerTheme>` — theme overrides when the selected date equals `minimumDate`
+- `maxDateTheme?: Partial<SmartDatePickerTheme>` — theme overrides when the selected date equals `maximumDate`
+- `primaryColor?: string`
+- `backgroundColor?: string`
+- `textColor?: string`
+- `buttonTextColor?: string`
+- `overlayBorderColor?: string`
+- `disabledTextColor?: string`
+- `selectionOverlayColor?: string`
+- `headerBackgroundColor?: string`
+- `wheelBackgroundColor?: string`
+
+### Style overrides
+
+- `containerStyle?: ViewStyle` — style for the modal container
+- `wheelStyle?: ViewStyle` — style for the wheel columns
+- `overlayStyle?: ViewStyle` — style for the picker panel / overlay
+- `textStyle?: TextStyle` — style for all wheel labels
+- `selectedTextStyle?: TextStyle` — style for the selected wheel label
+
+See `src/types/index.ts` for the full TypeScript interface.
+
+## Development
+
+Build the library locally:
+
+```bash
+npm install
+npm run build
+```
+
+For development with live compile:
+
+```bash
+npm run watch
+```
+
+### TypeScript / Editor notes
+
+- If your editor shows "Cannot use JSX unless the '--jsx' flag is provided", ensure `tsconfig.json` contains `"jsx": "react-jsx"` and restart the TypeScript server in VS Code: Command Palette → `TypeScript: Restart TS Server`.
+
+## License
+
+MIT

package/lib/components/DateColumn.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export default function DateColumn(props: any): React.JSX.Element;
+//# sourceMappingURL=DateColumn.d.ts.map

package/lib/components/DateColumn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateColumn.d.ts","sourceRoot":"","sources":["../../src/components/DateColumn.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,CAAC,OAAO,UAAU,UAAU,CAC9B,KAAK,EAAE,GAAG,qBAQb"}

package/lib/components/DateColumn.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = DateColumn;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const WheelColumn_1 = __importDefault(require("./WheelColumn"));
+const generateData_1 = require("../utils/generateData");
+function DateColumn(props) {
+    return ((0, jsx_runtime_1.jsx)(WheelColumn_1.default, Object.assign({ data: (0, generateData_1.generateDays)() }, props)));
+}

package/lib/components/HourColumn.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export default function HourColumn(props: any): React.JSX.Element;
+//# sourceMappingURL=HourColumn.d.ts.map

package/lib/components/HourColumn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HourColumn.d.ts","sourceRoot":"","sources":["../../src/components/HourColumn.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,CAAC,OAAO,UAAU,UAAU,CAC9B,KAAK,EAAE,GAAG,qBAQb"}

package/lib/components/HourColumn.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = HourColumn;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const WheelColumn_1 = __importDefault(require("./WheelColumn"));
+const generateData_1 = require("../utils/generateData");
+function HourColumn(props) {
+    return ((0, jsx_runtime_1.jsx)(WheelColumn_1.default, Object.assign({ data: (0, generateData_1.generateHours)() }, props)));
+}

package/lib/components/MinuteColumn.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export default function MinuteColumn(props: any): React.JSX.Element;
+//# sourceMappingURL=MinuteColumn.d.ts.map

package/lib/components/MinuteColumn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinuteColumn.d.ts","sourceRoot":"","sources":["../../src/components/MinuteColumn.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,CAAC,OAAO,UAAU,YAAY,CAChC,KAAK,EAAE,GAAG,qBAQb"}

package/lib/components/MinuteColumn.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = MinuteColumn;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const WheelColumn_1 = __importDefault(require("./WheelColumn"));
+const generateData_1 = require("../utils/generateData");
+function MinuteColumn(props) {
+    return ((0, jsx_runtime_1.jsx)(WheelColumn_1.default, Object.assign({ data: (0, generateData_1.generateMinutes)() }, props)));
+}

package/lib/components/MonthColumn.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export default function MonthColumn(props: any): React.JSX.Element;
+//# sourceMappingURL=MonthColumn.d.ts.map

package/lib/components/MonthColumn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonthColumn.d.ts","sourceRoot":"","sources":["../../src/components/MonthColumn.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,CAAC,OAAO,UAAU,WAAW,CAC/B,KAAK,EAAE,GAAG,qBAQb"}

package/lib/components/MonthColumn.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = MonthColumn;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const WheelColumn_1 = __importDefault(require("./WheelColumn"));
+const generateData_1 = require("../utils/generateData");
+function MonthColumn(props) {
+    return ((0, jsx_runtime_1.jsx)(WheelColumn_1.default, Object.assign({ data: (0, generateData_1.generateMonths)() }, props)));
+}

package/lib/components/PickerModal.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { ViewStyle } from "react-native";
+export default function PickerModal({ visible, children, backgroundColor, containerStyle, overlayStyle, }: {
+    visible: boolean;
+    children: React.ReactNode;
+    backgroundColor?: string;
+    containerStyle?: ViewStyle;
+    overlayStyle?: ViewStyle;
+}): React.JSX.Element;
+//# sourceMappingURL=PickerModal.d.ts.map

package/lib/components/PickerModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickerModal.d.ts","sourceRoot":"","sources":["../../src/components/PickerModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAIH,SAAS,EACZ,MAAM,cAAc,CAAC;AAEtB,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAChC,OAAO,EACP,QAAQ,EACR,eAAe,EACf,cAAc,EACd,YAAY,GACf,EAAE;IACC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,SAAS,CAAC;CAC5B,qBAuBA"}

package/lib/components/PickerModal.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = PickerModal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+function PickerModal({ visible, children, backgroundColor, containerStyle, overlayStyle, }) {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: visible, animationType: "slide", children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.container, containerStyle], children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                    styles.content,
+                    overlayStyle,
+                    {
+                        backgroundColor: backgroundColor || "#fff",
+                    },
+                ], children: children }) }) }));
+}
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: "flex-end",
+        backgroundColor: "rgba(0,0,0,0.4)",
+    },
+    content: {
+        height: 320,
+        backgroundColor: "#fff",
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+    },
+});

package/lib/components/SelectionOverlay.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface Props {
+    itemHeight?: number;
+    borderColor?: string;
+    selectionOverlayColor?: string;
+    overlayStyle?: any;
+}
+export default function SelectionOverlay({ itemHeight, borderColor, selectionOverlayColor, overlayStyle, }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=SelectionOverlay.d.ts.map

package/lib/components/SelectionOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionOverlay.d.ts","sourceRoot":"","sources":["../../src/components/SelectionOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,KAAK;IACX,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,YAAY,CAAC,EAAE,GAAG,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACrC,UAAe,EACf,WAAuB,EACvB,qBAAqC,EACrC,YAAY,GACf,EAAE,KAAK,qBAgBP"}

package/lib/components/SelectionOverlay.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = SelectionOverlay;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+function SelectionOverlay({ itemHeight = 44, borderColor = "#D1D5DB", selectionOverlayColor = "transparent", overlayStyle, }) {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "none", style: [
+            styles.overlay,
+            overlayStyle,
+            {
+                top: itemHeight * 2,
+                height: itemHeight,
+                borderColor,
+                backgroundColor: selectionOverlayColor,
+            },
+        ] }));
+}
+const styles = react_native_1.StyleSheet.create({
+    overlay: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        borderTopWidth: 1,
+        borderBottomWidth: 1,
+    },
+});

package/lib/components/SmartDatePicker.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { SmartDatePickerProps } from "../types";
+export default function SmartDatePicker({ visible, value, onConfirm, onCancel, mode, showSelectionOverlay, minimumDate, maximumDate, primaryColor, backgroundColor, textColor, buttonTextColor, overlayBorderColor, disabledTextColor, selectionOverlayColor, headerBackgroundColor, wheelBackgroundColor, theme, customTheme, minDateTheme, maxDateTheme, containerStyle, wheelStyle, overlayStyle, textStyle, selectedTextStyle, itemHeight, }: SmartDatePickerProps): React.JSX.Element;
+//# sourceMappingURL=SmartDatePicker.d.ts.map

package/lib/components/SmartDatePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmartDatePicker.d.ts","sourceRoot":"","sources":["../../src/components/SmartDatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAiBjD,OAAO,EACH,oBAAoB,EACvB,MAAM,UAAU,CAAC;AAOlB,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACpC,OAAO,EACP,KAAkB,EAClB,SAAS,EACT,QAAQ,EACR,IAAiB,EACjB,oBAA2B,EAC3B,WAAW,EACX,WAAW,EACX,YAAY,EACZ,eAAe,EACf,SAAS,EACT,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,EACpB,KAAK,EACL,WAAW,EACX,YAAY,EACZ,YAAY,EAEZ,cAAc,EACd,UAAU,EACV,YAAY,EACZ,SAAS,EACT,iBAAiB,EACjB,UAAU,GACb,EAAE,oBAAoB,qBA0OtB"}

package/lib/components/SmartDatePicker.js

@@ -0,0 +1,154 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = SmartDatePicker;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const PickerModal_1 = __importDefault(require("./PickerModal"));
+const DateColumn_1 = __importDefault(require("./DateColumn"));
+const MonthColumn_1 = __importDefault(require("./MonthColumn"));
+const YearColumn_1 = __importDefault(require("./YearColumn"));
+const HourColumn_1 = __importDefault(require("./HourColumn"));
+const MinuteColumn_1 = __importDefault(require("./MinuteColumn"));
+const SelectionOverlay_1 = __importDefault(require("./SelectionOverlay"));
+const useDatePicker_1 = require("../hooks/useDatePicker");
+const useTheme_1 = require("../hooks/useTheme");
+const dateUtils_1 = require("../utils/dateUtils");
+function SmartDatePicker({ visible, value = new Date(), onConfirm, onCancel, mode = "datetime", showSelectionOverlay = true, minimumDate, maximumDate, primaryColor, backgroundColor, textColor, buttonTextColor, overlayBorderColor, disabledTextColor, selectionOverlayColor, headerBackgroundColor, wheelBackgroundColor, theme, customTheme, minDateTheme, maxDateTheme, 
+// style overrides
+containerStyle, wheelStyle, overlayStyle, textStyle, selectedTextStyle, itemHeight, }) {
+    const boundedValue = (0, react_1.useMemo)(() => (0, dateUtils_1.clampDate)(value, minimumDate, maximumDate), [value, minimumDate, maximumDate]);
+    const picker = (0, useDatePicker_1.useDatePicker)(boundedValue);
+    // view toggles between 'date' and 'time' when mode is 'datetime'
+    const [view, setView] = (0, react_1.useState)(mode === "time" ? "time" : "date");
+    react_1.default.useEffect(() => {
+        if (!visible)
+            return;
+        setView(mode === "time" ? "time" : "date");
+    }, [visible, mode]);
+    const selectedDate = (0, dateUtils_1.buildDate)(picker.day, picker.month, picker.year, picker.hour, picker.minute);
+    const effectiveDate = (0, dateUtils_1.clampDate)(selectedDate, minimumDate, maximumDate);
+    const selectedBoundaryTheme = (0, react_1.useMemo)(() => {
+        if (minimumDate &&
+            effectiveDate.getTime() === minimumDate.getTime()) {
+            return minDateTheme;
+        }
+        if (maximumDate &&
+            effectiveDate.getTime() === maximumDate.getTime()) {
+            return maxDateTheme;
+        }
+        return undefined;
+    }, [effectiveDate, minimumDate, maximumDate, minDateTheme, maxDateTheme]);
+    const themeObj = customTheme !== null && customTheme !== void 0 ? customTheme : (typeof theme === "object" ? theme : undefined);
+    const activeTheme = (0, useTheme_1.useTheme)(Object.assign(Object.assign(Object.assign({}, themeObj), selectedBoundaryTheme), { primaryColor,
+        backgroundColor,
+        textColor,
+        buttonTextColor,
+        overlayBorderColor,
+        disabledTextColor,
+        selectionOverlayColor,
+        headerBackgroundColor,
+        wheelBackgroundColor }));
+    const handleDone = () => {
+        onConfirm(effectiveDate);
+    };
+    const handleNext = () => setView("time");
+    const renderDateColumns = () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DateColumn_1.default, { selected: picker.day, onChange: picker.setDay, textColor: activeTheme.textColor, selectedTextColor: activeTheme.primaryColor, wheelBackgroundColor: activeTheme.wheelBackgroundColor, wheelStyle: wheelStyle, textStyle: textStyle, selectedTextStyle: selectedTextStyle }), (0, jsx_runtime_1.jsx)(MonthColumn_1.default, { selected: picker.month, onChange: picker.setMonth, textColor: activeTheme.textColor, selectedTextColor: activeTheme.primaryColor, wheelBackgroundColor: activeTheme.wheelBackgroundColor, wheelStyle: wheelStyle, textStyle: textStyle, selectedTextStyle: selectedTextStyle }), (0, jsx_runtime_1.jsx)(YearColumn_1.default, { selected: picker.year, onChange: picker.setYear, textColor: activeTheme.textColor, selectedTextColor: activeTheme.primaryColor, wheelBackgroundColor: activeTheme.wheelBackgroundColor, wheelStyle: wheelStyle, textStyle: textStyle, selectedTextStyle: selectedTextStyle })] }));
+    const renderTimeColumns = () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HourColumn_1.default, { selected: picker.hour, onChange: picker.setHour, textColor: activeTheme.textColor, selectedTextColor: activeTheme.primaryColor, wheelBackgroundColor: activeTheme.wheelBackgroundColor, wheelStyle: wheelStyle, textStyle: textStyle, selectedTextStyle: selectedTextStyle }), (0, jsx_runtime_1.jsx)(MinuteColumn_1.default, { selected: picker.minute, onChange: picker.setMinute, textColor: activeTheme.textColor, selectedTextColor: activeTheme.primaryColor, wheelBackgroundColor: activeTheme.wheelBackgroundColor, wheelStyle: wheelStyle, textStyle: textStyle, selectedTextStyle: selectedTextStyle })] }));
+    const selectedText = view === "time"
+        ? selectedDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+        : selectedDate.toLocaleDateString();
+    return ((0, jsx_runtime_1.jsxs)(PickerModal_1.default, { visible: visible, backgroundColor: activeTheme.backgroundColor, containerStyle: containerStyle, overlayStyle: overlayStyle, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                    styles.header,
+                    {
+                        backgroundColor: activeTheme.headerBackgroundColor,
+                    },
+                ], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: onCancel, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                        styles.buttonText,
+                                        {
+                                            color: activeTheme.buttonTextColor ||
+                                                activeTheme.primaryColor,
+                                        },
+                                    ], children: "Cancel" }) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                    styles.previewText,
+                                    {
+                                        color: activeTheme.textColor,
+                                    },
+                                ], children: selectedText })] }), mode === "datetime" && view === "date" ? ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: handleNext, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                styles.buttonText,
+                                {
+                                    color: activeTheme.buttonTextColor ||
+                                        activeTheme.primaryColor,
+                                },
+                            ], children: "Next" }) })) : ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: handleDone, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                styles.buttonText,
+                                {
+                                    color: activeTheme.buttonTextColor ||
+                                        activeTheme.primaryColor,
+                                },
+                            ], children: "Done" }) }))] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                    styles.row,
+                    {
+                        backgroundColor: activeTheme.wheelBackgroundColor,
+                    },
+                ], children: [view === "date" ? renderDateColumns() : renderTimeColumns(), showSelectionOverlay && ((0, jsx_runtime_1.jsx)(SelectionOverlay_1.default, { itemHeight: itemHeight, borderColor: activeTheme.overlayBorderColor, selectionOverlayColor: activeTheme.selectionOverlayColor, overlayStyle: overlayStyle }))] })] }));
+}
+const styles = react_native_1.StyleSheet.create({
+    header: {
+        height: 50,
+        paddingHorizontal: 20,
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexDirection: "row",
+    },
+    row: {
+        flex: 1,
+        flexDirection: "row",
+        position: "relative",
+    },
+    buttonText: {
+        fontSize: 16,
+        fontWeight: "600",
+    },
+    previewText: {
+        marginTop: 6,
+        fontSize: 12,
+        color: "#666",
+    },
+});

package/lib/components/WheelColumn.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { TextStyle, ViewStyle } from "react-native";
+interface Props {
+    data: any[];
+    selected: any;
+    onChange: (v: any) => void;
+    textColor?: string;
+    selectedTextColor?: string;
+    wheelBackgroundColor?: string;
+    selectedFontSize?: number;
+    textStyle?: TextStyle;
+    selectedTextStyle?: TextStyle;
+    wheelStyle?: ViewStyle;
+}
+export default function WheelColumn({ data, selected, onChange, textColor, selectedTextColor, wheelBackgroundColor, selectedFontSize, textStyle, selectedTextStyle, wheelStyle, }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=WheelColumn.d.ts.map

package/lib/components/WheelColumn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WheelColumn.d.ts","sourceRoot":"","sources":["../../src/components/WheelColumn.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAC1D,OAAO,EAOH,SAAS,EACT,SAAS,EACZ,MAAM,cAAc,CAAC;AAEtB,UAAU,KAAK;IACX,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,QAAQ,EAAE,GAAG,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,UAAU,CAAC,EAAE,SAAS,CAAC;CAC1B;AAMD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAChC,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,EAEhB,SAAS,EACT,iBAAiB,EACjB,UAAU,GACb,EAAE,KAAK,qBA+KP"}

package/lib/components/WheelColumn.js

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = WheelColumn;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const ITEM_HEIGHT = 44;
+const VISIBLE_ROWS = 5;
+const WHEEL_HEIGHT = ITEM_HEIGHT * VISIBLE_ROWS;
+function WheelColumn({ data, selected, onChange, textColor, selectedTextColor, wheelBackgroundColor, selectedFontSize, 
+// forwarded style props
+textStyle, selectedTextStyle, wheelStyle, }) {
+    const listRef = (0, react_1.useRef)(null);
+    // Repeat data for infinite effect
+    const repeatedData = data;
+    // const repeatedData = useMemo(
+    //     () => [...data, ...data, ...data, ...data, ...data],
+    //     [data]
+    // );
+    const selectedIndex = data.findIndex((item) => item.value === selected);
+    const middleIndex = selectedIndex >= 0
+        ? selectedIndex
+        : 0;
+    // const middleIndex =
+    //     selectedIndex >= 0
+    //         ? selectedIndex + data.length * 2
+    //         : data.length * 2;
+    (0, react_1.useEffect)(() => {
+        setTimeout(() => {
+            var _a;
+            (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollToOffset({
+                offset: middleIndex * ITEM_HEIGHT,
+                animated: false,
+            });
+        }, 50);
+    }, []);
+    // const handleScrollEnd = (
+    //     e: NativeSyntheticEvent<NativeScrollEvent>
+    // ) => {
+    //     const offsetY =
+    //         e.nativeEvent.contentOffset.y;
+    //     const index = Math.round(
+    //         offsetY / ITEM_HEIGHT
+    //     );
+    //     const clampedIndex = Math.max(
+    //         0,
+    //         Math.min(index, data.length - 1)
+    //     );
+    //     listRef.current?.scrollToOffset({
+    //         offset:
+    //             clampedIndex * ITEM_HEIGHT,
+    //         animated: true,
+    //     });
+    //     const item = data[clampedIndex];
+    //     if (item) {
+    //         onChange(item.value);
+    //     }
+    // };
+    const handleScrollEnd = (e) => {
+        var _a;
+        const offsetY = e.nativeEvent.contentOffset.y;
+        const index = Math.round(offsetY / ITEM_HEIGHT);
+        const clampedIndex = Math.max(0, Math.min(index, data.length - 1));
+        (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollToOffset({
+            offset: clampedIndex * ITEM_HEIGHT,
+            animated: false,
+        });
+        const item = data[clampedIndex];
+        if (item) {
+            onChange(item.value);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(react_native_1.FlatList, { ref: listRef, data: repeatedData, keyExtractor: (_, index) => index.toString(), style: [
+            {
+                height: WHEEL_HEIGHT,
+                backgroundColor: wheelBackgroundColor || "transparent",
+            },
+            wheelStyle,
+        ], showsVerticalScrollIndicator: false, bounces: false, removeClippedSubviews: false, disableIntervalMomentum: true, snapToInterval: ITEM_HEIGHT, snapToAlignment: "center", decelerationRate: "fast", onMomentumScrollEnd: handleScrollEnd, getItemLayout: (_, index) => ({
+            length: ITEM_HEIGHT,
+            offset: ITEM_HEIGHT * index,
+            index,
+        }), renderItem: ({ item }) => ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: styles.item, onPress: () => {
+                var _a;
+                const index = data.findIndex((d) => d.value === item.value);
+                (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollToOffset({
+                    offset: index * ITEM_HEIGHT,
+                    animated: true,
+                });
+                onChange(item.value);
+            }, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                    styles.text,
+                    textStyle,
+                    {
+                        color: selectedTextColor ||
+                            textColor ||
+                            styles.text.color,
+                    },
+                    selected === item.value && [
+                        {
+                            fontWeight: "700",
+                            fontSize: selectedFontSize || 20,
+                            color: selectedTextColor ||
+                                textColor ||
+                                styles.text.color,
+                        },
+                        selectedTextStyle,
+                    ],
+                ], children: item.label }) })), contentContainerStyle: {
+            paddingTop: ((VISIBLE_ROWS - 1) / 2) *
+                ITEM_HEIGHT,
+            paddingBottom: ((VISIBLE_ROWS - 1) / 2) *
+                ITEM_HEIGHT,
+        } }));
+}
+const styles = react_native_1.StyleSheet.create({
+    item: {
+        height: ITEM_HEIGHT,
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    text: {
+        fontSize: 18,
+        color: "#111827",
+    },
+});

package/lib/components/YearColumn.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export default function YearColumn(props: any): React.JSX.Element;
+//# sourceMappingURL=YearColumn.d.ts.map