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

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "react-native-ruler-date-picker",
-  "version": "0.1.0",
-  "description": "A performant, customizable ruler-style date picker for React Native — 60 FPS Reanimated 3 physics, dual-speed haptic feedback, and windowed tick rendering.",
-  "type": "commonjs",
+  "version": "0.2.0",
+  "description": "A performant, customizable horizontal ruler date picker & scroll wheel for React Native & Expo — 60 FPS Reanimated 3 physics, dual-speed haptic feedback, and windowed tick rendering.",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "types": "lib/typescript/index.d.ts",
@@ -32,6 +31,7 @@
   ],
   "scripts": {
     "build": "bob build",
+    "prepack": "bob build",
     "typecheck": "tsc --noEmit",
     "test": "jest",
     "lint": "eslint \"src/**/*.{ts,tsx}\"",
@@ -39,14 +39,22 @@
   },
   "keywords": [
     "react-native",
+    "react-native-date-picker",
     "date-picker",
     "ruler",
+    "ruler-date-picker",
     "scroll-picker",
+    "wheel-picker",
+    "horizontal-date-picker",
+    "timeline-picker",
+    "expo",
+    "expo-date-picker",
     "reanimated",
     "haptics",
+    "gesture-handler",
+    "ui-components",
     "ios",
-    "android",
-    "gesture-handler"
+    "android"
   ],
   "repository": {
     "type": "git",
@@ -93,8 +101,18 @@
     "source": "src",
     "output": "lib",
     "targets": [
-      "commonjs",
-      "module",
+      [
+        "commonjs",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
       [
         "typescript",
         {

package/src/LensTick.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, { useAnimatedStyle, type SharedValue } from 'react-native-reanimated';
+import { useRulerContext } from './RulerContext';
+import { Tick } from './Tick';
+import type { ResolvedTick } from './types';
+
+export interface LensTickProps {
+  tick: ResolvedTick;
+  tickSpacing: number;
+  rulerHeight: number;
+  translateX: SharedValue<number>;
+  magnification: number;
+  radius: number;
+  scaleTicks: boolean;
+  containerWidth?: number;
+}
+
+/**
+ * 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.
+ */
+export function LensTick({
+  tick,
+  tickSpacing,
+  rulerHeight,
+  translateX,
+  magnification,
+  radius,
+  scaleTicks,
+  containerWidth,
+}: LensTickProps) {
+  const { width: contextWidth } = useRulerContext();
+  const width = containerWidth ?? contextWidth;
+
+  const animatedStyle = 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 (
+    <Animated.View
+      style={[
+        styles.lensTickWrapper,
+        { height: rulerHeight, left: width / 2 },
+        animatedStyle,
+      ]}
+    >
+      <Tick
+        tick={{
+          ...tick,
+          offset: 0,
+        }}
+        tickSpacing={tickSpacing}
+        rulerHeight={rulerHeight}
+      />
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  lensTickWrapper: {
+    position: 'absolute',
+    height: '100%',
+    width: 0,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+});

package/src/Ruler.ts

@@ -0,0 +1,32 @@
+import { RulerRoot } from './RulerRoot';
+import { RulerTrack } from './RulerTrack';
+import { RulerIndicator } from './RulerIndicator';
+import { RulerTicks } from './RulerTicks';
+import { Tick } from './Tick';
+import { RulerHeader } from './RulerHeader';
+import { RulerResetButton } from './RulerResetButton';
+import { RulerLensTrack } from './RulerLensTrack';
+import { RulerLensTicks } from './RulerLensTicks';
+
+/**
+ * Compound Anatomy API for the Ruler Date Picker.
+ *
+ * @example
+ * ```tsx
+ * <Ruler.Root value={selectedDate} onChange={setSelectedDate}>
+ *   <Ruler.Header />
+ *   <Ruler.LensTrack />
+ * </Ruler.Root>
+ * ```
+ */
+export const Ruler = {
+  Root: RulerRoot,
+  Track: RulerTrack,
+  LensTrack: RulerLensTrack,
+  Ticks: RulerTicks,
+  LensTicks: RulerLensTicks,
+  Indicator: RulerIndicator,
+  Tick: Tick,
+  Header: RulerHeader,
+  ResetButton: RulerResetButton,
+};

package/src/RulerContext.tsx

@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'react';
+import type { UseRulerDatePickerReturn } from './useRulerDatePicker';
+import type { LensConfig, IndicatorConfig, HeaderConfig } from './types';
+
+export interface RulerContextValue extends UseRulerDatePickerReturn {
+  indicatorConfig?: IndicatorConfig;
+  headerConfig?: HeaderConfig;
+  locale?: string;
+  lensConfig?: Required<LensConfig> | null;
+}
+
+export const RulerContext = createContext<RulerContextValue | null>(null);
+
+export function useRulerContext(): RulerContextValue {
+  const context = useContext(RulerContext);
+  if (!context) {
+    throw new Error('Ruler compound subcomponents must be rendered within a <Ruler.Root> provider.');
+  }
+  return context;
+}