react-native-ruler-date-picker 0.1.0 → 0.2.0

package/README.md

@@ -1,17 +1,26 @@
-# react-native-ruler-date-picker
+<p align="center">
+  <img src="https://raw.githubusercontent.com/md-rehman/react-native-ruler-date-picker/dev/apps/docs/public/logo.svg" width="96" height="96" alt="react-native-ruler-date-picker logo" />
+</p>
 
-A performant, customizable ruler-style date picker for React Native.
+<h1 align="center">react-native-ruler-date-picker</h1>
 
-<!-- TODO: Add hero GIF/video here -->
+<p align="center">
+  A performant, customizable horizontal ruler date picker & scroll wheel for React Native and Expo. Powered by 60 FPS Reanimated 3 physics and dual-speed haptic feedback.
+</p>
+
+<p align="center">
+  <a href="https://github.com/md-rehman/react-native-ruler-date-picker"><strong>Documentation & Interactive Demos »</strong></a>
+</p>
 
 ## ✨ Features
 
 - **60 FPS Physics** — Reanimated 3 decay animations with snap-to-tick alignment
 - **Dual-Speed Haptics** — Discrete ticks at slow scroll, continuous buzz at fast swipe
 - **Windowed Rendering** — Only renders visible ticks + buffer for memory efficiency
-- **Fully Customizable** — Every dimension, color, and behavior is configurable via props
-- **Graceful Haptics** — Works with `expo-haptics`, custom handlers, or silently without either
-- **Dark Mode Support** — Auto-detects system color scheme with manual override
+- **Multi-Tier Rule-Based Graduations** — Declarative tick rules (`ticks="calendar"` | `"metric"` | `"minimal"` or custom rules array)
+- **Compound Anatomy API** — Full layout flexibility with `Ruler.*` and `RulerRange.*`
+- **Date Range Selection [Experimental]** — Dual-handle date range picker with `RulerDateRangePicker`
+- **Dark Mode Support** — Auto-detects system color scheme with custom theme palette override
 
 ## 📦 Installation
 
@@ -37,88 +46,205 @@ Optional (for haptic feedback):
 npx expo install expo-haptics
 ```
 
+### Configure Peer Dependencies
+
+#### 1. Babel Configuration
+For bare React Native CLI apps, add the Reanimated Babel plugin to your `babel.config.js` as the **very last** plugin:
+
+```javascript
+module.exports = {
+  presets: ['module:@react-native/babel-preset'],
+  plugins: [
+    'react-native-reanimated/plugin', // MUST be last plugin
+  ],
+};
+```
+
+> **Note for Expo (SDK 50+)**: In managed Expo workflows using `babel-preset-expo`, the Reanimated Babel plugin is included automatically.
+
+#### 2. GestureHandlerRootView
+Wrap your application root component with `GestureHandlerRootView` so gestures and pan physics function properly:
+
+```tsx
+import React from 'react';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import MainScreen from './MainScreen';
+
+export default function App() {
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <MainScreen />
+    </GestureHandlerRootView>
+  );
+}
+```
+
+> If using **Expo Router**, wrap your root layout in `app/_layout.tsx`.
+
 ## 🚀 Quick Start
 
 ```tsx
+import React, { useState } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
 import { RulerDatePicker } from 'react-native-ruler-date-picker';
 
 export default function App() {
   const [date, setDate] = useState(new Date());
 
   return (
-    <RulerDatePicker
-      selectedDate={date}
-      onSelectDate={(newDate, dateString) => {
-        setDate(newDate);
-        console.log('Selected:', dateString); // "2026-08-07"
-      }}
-    />
+    <View style={styles.container}>
+      <Text style={styles.label}>
+        Selected: {date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
+      </Text>
+
+      <RulerDatePicker
+        value={date}
+        onChange={(newDate, dateString) => {
+          setDate(newDate);
+          console.log('Selected Date:', dateString); // "YYYY-MM-DD"
+        }}
+        ticks="calendar"
+        header={{ showResetToToday: true }}
+      />
+    </View>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#0F172A',
+  },
+  label: {
+    color: '#F8FAFC',
+    fontSize: 16,
+    fontWeight: '600',
+    marginBottom: 24,
+  },
+});
 ```
 
+## 📅 Date Range Selection [Experimental]
+
+Select a range with start and end handles using `RulerDateRangePicker`:
+
+```tsx
+import React, { useState } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { RulerDateRangePicker, DateRange } from 'react-native-ruler-date-picker';
+
+export default function RangeBookingScreen() {
+  const [range, setRange] = useState<DateRange>({
+    start: new Date(),
+    end: new Date(Date.now() + 5 * 86400000), // +5 days
+  });
+
+  return (
+    <View style={styles.container}>
+      <RulerDateRangePicker
+        value={range}
+        onChange={({ startDate, endDate, dateRange }) => {
+          setRange(dateRange);
+          console.log('Selected range:', startDate, '→', endDate);
+        }}
+        minSpanDays={1}
+        maxSpanDays={30}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#0F172A',
+  },
+});
+```
+
+## 🧩 Compound Anatomy API
+
+For full layout flexibility, compose custom pickers with `Ruler.*`:
+
+```tsx
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { Ruler } from 'react-native-ruler-date-picker';
+
+export default function CustomAnatomy() {
+  const [date, setDate] = useState(new Date());
+
+  return (
+    <Ruler.Root value={date} onChange={setDate} tickSpacing={28}>
+      {/* 1. Header with custom placement */}
+      <Ruler.Header showResetToToday={false} />
+
+      {/* 2. Scroll arena containing needle & graduation ticks */}
+      <Ruler.Track>
+        <Ruler.Indicator />
+        <Ruler.Ticks />
+      </Ruler.Track>
+
+      {/* 3. Standalone Reset button */}
+      <View style={{ alignItems: 'center', marginTop: 12 }}>
+        <Ruler.ResetButton label="Jump to Today" />
+      </View>
+    </Ruler.Root>
+  );
+}
+```
+
+For range pickers, use `RulerRange.*` (`RulerRange.Root`, `RulerRange.Header`, `RulerRange.Track`, `RulerRange.Ticks`, and `RulerRange.Indicator`).
+
 ## 📐 API Reference
 
 ### Props
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `selectedDate` | `Date \| string` | **required** | Currently selected date |
-| `onSelectDate` | `(date: Date, dateString: string) => void` | **required** | Called when date changes |
-| `minDate` | `Date` | -365 days | Minimum scrollable date |
-| `maxDate` | `Date` | +365 days | Maximum scrollable date |
-| `labelInterval` | `'daily' \| 'weekly' \| 'monthly' \| (date: Date) => boolean` | `'weekly'` | Which ticks show labels |
-| `highlightDays` | `number[]` | — | Days of week to highlight (0=Sun, 6=Sat) |
-| `tickSpacing` | `number` | `24` | Gap between ticks (px) |
-| `tickHeight` | `number` | `12` | Small tick height (px) |
-| `tickTallHeight` | `number` | `24` | Large/labeled tick height (px) |
-| `tickThickness` | `number` | `4` | Tick bar width (px) |
-| `tickColor` | `string` | auto | Small tick color |
-| `tickTallColor` | `string` | auto | Large tick color (falls back to `tickColor`) |
-| `labelColor` | `string` | auto | Label text color |
-| `accentColor` | `string` | auto | Today dot & reset button color |
-| `indicatorColor` | `string` | auto | Center indicator line color |
-| `backgroundColor` | `string` | `transparent` | Component background |
-| `height` | `number` | `120` | Total component height (px) |
-| `rulerHeight` | `number` | `60` | Ruler track height (px) |
-| `indicatorWidth` | `number` | `2` | Center indicator width (px) |
-| `indicatorHeight` | `number` | `40` | Center indicator height (px) |
-| `todayDotSize` | `number` | `6` | Today dot diameter (px) |
-| `labelFontSize` | `number` | `10` | Tick label font size (px) |
-| `bufferTicks` | `number` | `10` | Off-screen render buffer |
-| `updateDebounceMs` | `number` | `100` | Debounce for `onSelectDate` (ms) |
-| `enableHaptics` | `boolean` | `true` | Enable/disable haptic feedback |
-| `onHapticTrigger` | `(mode: 'tick' \| 'continuous') => void` | — | Custom haptic handler |
-| `fastSwipeTickThreshold` | `number` | `1` | Ticks/frame to trigger fast mode |
-| `continuousHapticIntervalMs` | `number` | `20` | Continuous haptic pulse interval (ms) |
-| `showResetToToday` | `boolean` | `false` | Show "Today" reset button |
-| `renderHeader` | `(date, isToday, resetFn) => ReactNode` | — | Custom header renderer |
+| `value` | `Date \| string` | `new Date() (Today)` | Currently selected date (controlled). Accepts Date or "YYYY-MM-DD". |
+| `defaultValue` | `Date \| string` | `new Date() (Today)` | Initial selected date for uncontrolled mode. |
+| `onChange` | `(date: Date, dateString: string) => void` | `undefined` | Called when scrolling stops and snaps to a date. |
+| `minDate` | `Date \| string` | `Today - 365 days` | Minimum selectable date boundary. |
+| `maxDate` | `Date \| string` | `Today + 365 days` | Maximum selectable date boundary. |
+| `locale` | `string` | `'default'` | BCP 47 locale tag (e.g. "en-US", "de-DE", "ja-JP") for date formatting. |
+| `ticks` | `TickRule[] \| 'calendar' \| 'metric' \| 'minimal'` | `'calendar'` | Graduation rules array or preset name. |
+| `tickSpacing` | `number` | `24` | Gap in pixels between consecutive tick graduation marks. |
+| `tickWidth` | `number` | `3` | Base thickness in pixels for tick graduation bars. |
+| `width` | `number` | `window width` | Viewport track width in pixels. Defaults to device window width. |
+| `rulerHeight` | `number` | `60` | Height in pixels of the interactive ruler tick viewport track. |
+| `header` | `boolean \| HeaderConfig` | `true` | Top date header display, config options, or custom renderer. |
+| `indicator` | `boolean \| IndicatorConfig` | `true` | Center needle indicator display, dimensions, or custom renderer. |
+| `haptics` | `boolean \| HapticConfig` | `true` | Dual-speed tactile vibration toggle or custom trigger callback. |
+| `lensEffect` | `boolean \| LensConfig` | `false` | Optical fisheye lens distortion magnifying center spacing. |
+| `theme` | `RulerTheme` | `auto (system)` | Color theme tokens overriding default Light/Dark color scheme. |
+| `style` | `StyleProp<ViewStyle>` | `undefined` | Container view style applied to outer root component. |
+| `debounceMs` | `number` | `100` | Debounce duration in milliseconds for `onChange` during fast scroll. |
+| `testID` | `string` | `undefined` | Identifier for automated testing and inspection. |
+| `accessibilityLabel` | `string` | `'Date picker'` | Screen reader accessibility label for assistive technologies. |
 
 ## 🎨 Theming
 
-Colors auto-detect the system color scheme. Override any color individually:
+Colors auto-detect system light/dark mode. Provide custom tokens using `theme`:
 
 ```tsx
 <RulerDatePicker
-  selectedDate={new Date()}
-  onSelectDate={handleSelect}
-  tickColor="#E5E7EB"
-  tickTallColor="#6366F1"
-  accentColor="#8B5CF6"
-  indicatorColor="#8B5CF6"
-  labelColor="#A1A1AA"
-  backgroundColor="#18181B"
+  value={date}
+  onChange={setDate}
+  theme={{
+    background: '#0F172A',
+    indicatorColor: '#38BDF8',
+    accentColor: '#38BDF8',
+    labelColor: '#F8FAFC',
+    defaultTickColor: '#334155',
+  }}
 />
 ```
 
-## 🤝 Contributing
-
-See the [ROADMAP](./ROADMAP.md) for planned features and development phases.
-
-1. Clone the repo
-2. Install dependencies: `pnpm install`
-3. Start the example app: `pnpm dev`
-
 ## 📄 License
 
 MIT © [Rehman](https://md-rehman.dev)

package/lib/commonjs/LensTick.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LensTick = LensTick;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _RulerContext = require("./RulerContext.js");
+var _Tick = require("./Tick.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Animated tick item with non-linear hyperbolic-tangent spatial distortion.
+ * Tick spacing smoothly magnifies near the center needle and asymptotically
+ * flattens out to standard spacing away from the center.
+ */
+function LensTick({
+  tick,
+  tickSpacing,
+  rulerHeight,
+  translateX,
+  magnification,
+  radius,
+  scaleTicks,
+  containerWidth
+}) {
+  const {
+    width: contextWidth
+  } = (0, _RulerContext.useRulerContext)();
+  const width = containerWidth ?? contextWidth;
+  const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    'worklet';
+
+    const d = tick.offset * tickSpacing + translateX.value;
+    const A = (magnification - 1) * radius;
+    const warpedX = d + A * Math.tanh(d / radius);
+    if (!scaleTicks) {
+      return {
+        transform: [{
+          translateX: warpedX
+        }]
+      };
+    }
+    const dist = Math.abs(d);
+    const radiusLimit = radius * 1.5;
+    const factor = dist < radiusLimit ? 1 - dist / radiusLimit : 0;
+    const scale = 1 + (magnification - 1) * 0.25 * factor;
+    return {
+      transform: [{
+        translateX: warpedX
+      }, {
+        scale: scale
+      }]
+    };
+  }, [tick.offset, tickSpacing, translateX, magnification, radius, scaleTicks]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+    style: [styles.lensTickWrapper, {
+      height: rulerHeight,
+      left: width / 2
+    }, animatedStyle],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tick.Tick, {
+      tick: {
+        ...tick,
+        offset: 0
+      },
+      tickSpacing: tickSpacing,
+      rulerHeight: rulerHeight
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  lensTickWrapper: {
+    position: 'absolute',
+    height: '100%',
+    width: 0,
+    justifyContent: 'flex-end',
+    alignItems: 'center'
+  }
+});
+//# sourceMappingURL=LensTick.js.map

package/lib/commonjs/LensTick.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNativeReanimated","_interopRequireWildcard","_RulerContext","_Tick","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","LensTick","tick","tickSpacing","rulerHeight","translateX","magnification","radius","scaleTicks","containerWidth","width","contextWidth","useRulerContext","animatedStyle","useAnimatedStyle","d","offset","value","A","warpedX","Math","tanh","transform","dist","abs","radiusLimit","factor","scale","jsx","View","style","styles","lensTickWrapper","height","left","children","Tick","StyleSheet","create","position","justifyContent","alignItems"],"sourceRoot":"../../src","sources":["LensTick.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/Ruler.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Ruler = void 0;
+var _RulerRoot = require("./RulerRoot.js");
+var _RulerTrack = require("./RulerTrack.js");
+var _RulerIndicator = require("./RulerIndicator.js");
+var _RulerTicks = require("./RulerTicks.js");
+var _Tick = require("./Tick.js");
+var _RulerHeader = require("./RulerHeader.js");
+var _RulerResetButton = require("./RulerResetButton.js");
+var _RulerLensTrack = require("./RulerLensTrack.js");
+var _RulerLensTicks = require("./RulerLensTicks.js");
+/**
+ * Compound Anatomy API for the Ruler Date Picker.
+ *
+ * @example
+ * ```tsx
+ * <Ruler.Root value={selectedDate} onChange={setSelectedDate}>
+ *   <Ruler.Header />
+ *   <Ruler.LensTrack />
+ * </Ruler.Root>
+ * ```
+ */
+const Ruler = exports.Ruler = {
+  Root: _RulerRoot.RulerRoot,
+  Track: _RulerTrack.RulerTrack,
+  LensTrack: _RulerLensTrack.RulerLensTrack,
+  Ticks: _RulerTicks.RulerTicks,
+  LensTicks: _RulerLensTicks.RulerLensTicks,
+  Indicator: _RulerIndicator.RulerIndicator,
+  Tick: _Tick.Tick,
+  Header: _RulerHeader.RulerHeader,
+  ResetButton: _RulerResetButton.RulerResetButton
+};
+//# sourceMappingURL=Ruler.js.map

package/lib/commonjs/Ruler.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_RulerRoot","require","_RulerTrack","_RulerIndicator","_RulerTicks","_Tick","_RulerHeader","_RulerResetButton","_RulerLensTrack","_RulerLensTicks","Ruler","exports","Root","RulerRoot","Track","RulerTrack","LensTrack","RulerLensTrack","Ticks","RulerTicks","LensTicks","RulerLensTicks","Indicator","RulerIndicator","Tick","Header","RulerHeader","ResetButton","RulerResetButton"],"sourceRoot":"../../src","sources":["Ruler.ts"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,eAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AACA,IAAAK,YAAA,GAAAL,OAAA;AACA,IAAAM,iBAAA,GAAAN,OAAA;AACA,IAAAO,eAAA,GAAAP,OAAA;AACA,IAAAQ,eAAA,GAAAR,OAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMS,KAAK,GAAAC,OAAA,CAAAD,KAAA,GAAG;EACnBE,IAAI,EAAEC,oBAAS;EACfC,KAAK,EAAEC,sBAAU;EACjBC,SAAS,EAAEC,8BAAc;EACzBC,KAAK,EAAEC,sBAAU;EACjBC,SAAS,EAAEC,8BAAc;EACzBC,SAAS,EAAEC,8BAAc;EACzBC,IAAI,EAAEA,UAAI;EACVC,MAAM,EAAEC,wBAAW;EACnBC,WAAW,EAAEC;AACf,CAAC","ignoreList":[]}

package/lib/commonjs/RulerContext.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RulerContext = void 0;
+exports.useRulerContext = useRulerContext;
+var _react = require("react");
+const RulerContext = exports.RulerContext = /*#__PURE__*/(0, _react.createContext)(null);
+function useRulerContext() {
+  const context = (0, _react.useContext)(RulerContext);
+  if (!context) {
+    throw new Error('Ruler compound subcomponents must be rendered within a <Ruler.Root> provider.');
+  }
+  return context;
+}
+//# sourceMappingURL=RulerContext.js.map

package/lib/commonjs/RulerContext.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","RulerContext","exports","createContext","useRulerContext","context","useContext","Error"],"sourceRoot":"../../src","sources":["RulerContext.tsx"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAWO,MAAMC,YAAY,GAAAC,OAAA,CAAAD,YAAA,gBAAG,IAAAE,oBAAa,EAA2B,IAAI,CAAC;AAElE,SAASC,eAAeA,CAAA,EAAsB;EACnD,MAAMC,OAAO,GAAG,IAAAC,iBAAU,EAACL,YAAY,CAAC;EACxC,IAAI,CAACI,OAAO,EAAE;IACZ,MAAM,IAAIE,KAAK,CAAC,+EAA+E,CAAC;EAClG;EACA,OAAOF,OAAO;AAChB","ignoreList":[]}