@retray-dev/ui-kit 7.0.1 → 9.1.0

package/dist/MenuItem.js

@@ -2,7 +2,6 @@
 
 var React3 = require('react');
 var reactNative = require('react-native');
-var Animated = require('react-native-reanimated');
 var vectorIcons = require('@expo/vector-icons');
 var reactNativeSizeMatters = require('react-native-size-matters');
 var AntDesign = require('@expo/vector-icons/AntDesign');
@@ -11,11 +10,12 @@ var Feather = require('@expo/vector-icons/Feather');
 var FontAwesome5 = require('@expo/vector-icons/FontAwesome5');
 var MaterialIcons = require('@expo/vector-icons/MaterialIcons');
 var Ionicons = require('@expo/vector-icons/Ionicons');
+var pressto = require('pressto');
+var reactNativeReanimated = require('react-native-reanimated');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React3__default = /*#__PURE__*/_interopDefault(React3);
-var Animated__default = /*#__PURE__*/_interopDefault(Animated);
 var AntDesign__default = /*#__PURE__*/_interopDefault(AntDesign);
 var Entypo__default = /*#__PURE__*/_interopDefault(Entypo);
 var Feather__default = /*#__PURE__*/_interopDefault(Feather);
@@ -23,18 +23,65 @@ var FontAwesome5__default = /*#__PURE__*/_interopDefault(FontAwesome5);
 var MaterialIcons__default = /*#__PURE__*/_interopDefault(MaterialIcons);
 var Ionicons__default = /*#__PURE__*/_interopDefault(Ionicons);
 
-// src/components/MenuItem/MenuItem.tsx
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
 var _haptics = null;
+var _hapticsLoaded = false;
 async function getHaptics() {
   if (reactNative.Platform.OS === "web") return null;
-  if (!_haptics) {
-    _haptics = await import('expo-haptics');
+  if (!_hapticsLoaded) {
+    _hapticsLoaded = true;
+    try {
+      _haptics = await import('expo-haptics');
+    } catch {
+      _haptics = null;
+    }
   }
   return _haptics;
 }
+var _pulsar = null;
+var _pulsarChecked = false;
+var _pulsarAvailable = false;
+function isPulsarNativeRegistered() {
+  try {
+    const g = globalThis;
+    if (typeof g.__turboModuleProxy === "function") {
+      return g.__turboModuleProxy("RNPulsar") != null;
+    }
+    return reactNative.NativeModules?.RNPulsar != null;
+  } catch {
+    return false;
+  }
+}
+function getPulsar() {
+  if (reactNative.Platform.OS === "web") return null;
+  if (!_pulsarChecked) {
+    _pulsarChecked = true;
+    try {
+      if (isPulsarNativeRegistered()) {
+        _pulsar = __require("react-native-pulsar");
+        _pulsarAvailable = true;
+      }
+    } catch {
+      _pulsar = null;
+      _pulsarAvailable = false;
+    }
+  }
+  return _pulsarAvailable ? _pulsar : null;
+}
 function selectionAsync() {
   if (reactNative.Platform.OS === "web") return;
-  getHaptics().then((h) => h?.selectionAsync());
+  getHaptics().then((h) => {
+    if (h) {
+      h.selectionAsync();
+    } else {
+      getPulsar()?.Presets.System.selection();
+    }
+  });
 }
 
 // src/theme/colorUtils.ts
@@ -204,65 +251,45 @@ function renderIcon(name, size, color) {
 // src/tokens.ts
 var RADIUS = {
   md: 14};
-var SPRINGS = {
-  /** Tight, premium press feel — Buttons, Toggle, Tabs triggers. */
-  pressIn: { stiffness: 600, damping: 35, mass: 0.8 },
-  pressOut: { stiffness: 280, damping: 22, mass: 0.8 },
-  /** Slightly softer for larger surfaces — Card, ListItem, MenuItem. */
-  surfacePressIn: { stiffness: 380, damping: 30, mass: 0.95 },
-  surfacePressOut: { stiffness: 220, damping: 20, mass: 0.95 }};
 ({
   /** Material-style ease-out — natural deceleration for state changes. */
-  standard: Animated.Easing.bezier(0.2, 0, 0, 1),
+  standard: reactNativeReanimated.Easing.bezier(0.2, 0, 0, 1),
   /** Strong ease-out for expanding surfaces (Accordion open). */
-  expand: Animated.Easing.bezier(0.23, 1, 0.32, 1),
+  expand: reactNativeReanimated.Easing.bezier(0.23, 1, 0.32, 1),
   /** Quick ease-in for collapsing. */
-  collapse: Animated.Easing.in(Animated.Easing.ease)
+  collapse: reactNativeReanimated.Easing.in(reactNativeReanimated.Easing.ease)
 });
 var PRESS_SCALE = {
   button: 0.95,
-  row: 0.97};
-function useHover() {
-  const [hovered, setHovered] = React3.useState(false);
-  const onMouseEnter = React3.useCallback(() => setHovered(true), []);
-  const onMouseLeave = React3.useCallback(() => setHovered(false), []);
-  if (reactNative.Platform.OS !== "web") {
-    return { hovered: false, hoverHandlers: {} };
-  }
-  return { hovered, hoverHandlers: { onMouseEnter, onMouseLeave } };
-}
-
-// src/utils/usePressScale.ts
-function usePressScale({
-  pressScale = PRESS_SCALE.button,
-  hoverScale = 1.02,
-  pressInSpring = SPRINGS.pressIn,
-  pressOutSpring = SPRINGS.pressOut,
-  disabled = false
-} = {}) {
-  const scale2 = Animated.useSharedValue(1);
-  const { hovered, hoverHandlers } = useHover();
-  const onPressIn = React3.useCallback(() => {
-    if (disabled) return;
-    scale2.value = Animated.withSpring(pressScale, pressInSpring);
-  }, [disabled, pressScale, pressInSpring, scale2]);
-  const onPressOut = React3.useCallback(() => {
-    if (disabled) return;
-    scale2.value = Animated.withSpring(1, pressOutSpring);
-  }, [disabled, pressOutSpring, scale2]);
-  const hoverActive = reactNative.Platform.OS === "web" && hovered && hoverScale !== 1 && !disabled;
-  const animatedStyle = Animated.useAnimatedStyle(() => ({
-    transform: [
-      { scale: scale2.value * (hoverActive ? hoverScale : 1) }
-    ]
-  }));
-  return {
-    animatedStyle,
-    onPressIn,
-    onPressOut,
-    hoverHandlers
-  };
-}
+  card: 0.98,
+  row: 0.97,
+  chip: 0.94
+};
+pressto.createAnimatedPressable((progress) => {
+  "worklet";
+  const scale2 = 1 - (1 - PRESS_SCALE.button) * progress;
+  return { transform: [{ scale: scale2 }] };
+});
+pressto.createAnimatedPressable((progress) => {
+  "worklet";
+  const scale2 = 1 - (1 - PRESS_SCALE.card) * progress;
+  return { transform: [{ scale: scale2 }] };
+});
+var PressableRow = pressto.createAnimatedPressable((progress) => {
+  "worklet";
+  const scale2 = 1 - (1 - PRESS_SCALE.row) * progress;
+  return { transform: [{ scale: scale2 }] };
+});
+pressto.createAnimatedPressable((progress) => {
+  "worklet";
+  const scale2 = 1 - (1 - PRESS_SCALE.chip) * progress;
+  return { transform: [{ scale: scale2 }] };
+});
+pressto.createAnimatedPressable((progress) => {
+  "worklet";
+  const scale2 = 1 - (1 - PRESS_SCALE.button) * progress;
+  return { transform: [{ scale: scale2 }] };
+});
 
 // src/components/MenuItem/MenuItem.tsx
 function MenuItemBase({
@@ -282,12 +309,6 @@ function MenuItemBase({
   accessibilityLabel
 }) {
   const { colors } = useTheme();
-  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
-    pressScale: PRESS_SCALE.row,
-    pressInSpring: SPRINGS.surfacePressIn,
-    pressOutSpring: SPRINGS.surfacePressOut,
-    disabled
-  });
   const handlePress = () => {
     selectionAsync();
     onPress();
@@ -305,16 +326,15 @@ function MenuItemBase({
     elevation: 2
   } : {};
   const a11yLabel = accessibilityLabel ?? (subtitle ? `${label}. ${subtitle}` : label);
-  return /* @__PURE__ */ React3__default.default.createElement(Animated__default.default.View, { style: [animatedStyle, disabled && styles.disabled], ...hoverHandlers }, /* @__PURE__ */ React3__default.default.createElement(
-    reactNative.TouchableOpacity,
+  return /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: disabled && styles.disabled }, /* @__PURE__ */ React3__default.default.createElement(
+    PressableRow,
     {
       style: [styles.container, cardStyle, style],
       onPress: handlePress,
-      onPressIn,
-      onPressOut,
-      disabled,
-      activeOpacity: 1,
+      enabled: !disabled,
+      rippleColor: "transparent",
       touchSoundDisabled: true,
+      activateOnHover: true,
       accessibilityRole: "button",
       accessibilityLabel: a11yLabel,
       accessibilityState: { disabled }
@@ -347,15 +367,7 @@ function MenuItemBase({
       },
       rightRender
     ) : showChevron ? /* @__PURE__ */ React3__default.default.createElement(vectorIcons.Entypo, { name: "chevron-right", size: 18, color: colors.foregroundMuted }) : null
-  ), showSeparator ? /* @__PURE__ */ React3__default.default.createElement(
-    reactNative.View,
-    {
-      style: [
-        styles.separator,
-        { backgroundColor: colors.separator }
-      ]
-    }
-  ) : null);
+  ), showSeparator ? /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: [styles.separator, { backgroundColor: colors.separator }] }) : null);
 }
 var MenuItem = React3__default.default.memo(MenuItemBase);
 var styles = reactNative.StyleSheet.create({

package/dist/MenuItem.mjs

@@ -1,8 +1,9 @@
-export { MenuItem } from './chunk-GPOUINK5.mjs';
-import './chunk-T7XZ7H7Y.mjs';
-import './chunk-QCNARS3X.mjs';
-import './chunk-RTC3CFXF.mjs';
-import './chunk-5IKW3VNC.mjs';
+export { MenuItem } from './chunk-ZJKGQMYH.mjs';
+import './chunk-3DKJ2GIC.mjs';
+import './chunk-EJ7ZPXOH.mjs';
+import './chunk-DVK4G2GT.mjs';
 import './chunk-QY3X2UYR.mjs';
+import './chunk-T7XZ7H7Y.mjs';
 import './chunk-SOYNZDVY.mjs';
 import './chunk-2CE3TQVY.mjs';
+import './chunk-Y6FXYEAI.mjs';

package/dist/MonthPicker.d.mts

@@ -6,15 +6,23 @@ interface MonthPickerValue {
     month: number;
     year: number;
 }
+/** Convert a JS `Date` to a `MonthPickerValue` (uses local time). */
+declare function dateToMonthPickerValue(date: Date): MonthPickerValue;
+/** Convert a `MonthPickerValue` to a `Date` at the first day of that month (local time). */
+declare function monthPickerValueToDate(value: MonthPickerValue): Date;
 interface MonthPickerProps {
     value: MonthPickerValue;
     onChange: (value: MonthPickerValue) => void;
+    /** Earliest selectable month (inclusive). Prev arrow disables at this bound. */
+    minValue?: MonthPickerValue;
+    /** Latest selectable month (inclusive). Next arrow disables at this bound — e.g. cap at the current month. */
+    maxValue?: MonthPickerValue;
     /** BCP 47 locale tag. Built-in: 'en' | 'es' | 'pt' | 'fr'. For other locales supply formatLabel. */
     locale?: string;
     /** Custom label formatter. Takes precedence over locale. */
     formatLabel?: (value: MonthPickerValue) => string;
     style?: ViewStyle;
 }
-declare function MonthPicker({ value, onChange, locale, formatLabel, style }: MonthPickerProps): React.JSX.Element;
+declare function MonthPicker({ value, onChange, minValue, maxValue, locale, formatLabel, style }: MonthPickerProps): React.JSX.Element;
 
-export { MonthPicker, type MonthPickerProps, type MonthPickerValue };
+export { MonthPicker, type MonthPickerProps, type MonthPickerValue, dateToMonthPickerValue, monthPickerValueToDate };

package/dist/MonthPicker.d.ts

@@ -6,15 +6,23 @@ interface MonthPickerValue {
     month: number;
     year: number;
 }
+/** Convert a JS `Date` to a `MonthPickerValue` (uses local time). */
+declare function dateToMonthPickerValue(date: Date): MonthPickerValue;
+/** Convert a `MonthPickerValue` to a `Date` at the first day of that month (local time). */
+declare function monthPickerValueToDate(value: MonthPickerValue): Date;
 interface MonthPickerProps {
     value: MonthPickerValue;
     onChange: (value: MonthPickerValue) => void;
+    /** Earliest selectable month (inclusive). Prev arrow disables at this bound. */
+    minValue?: MonthPickerValue;
+    /** Latest selectable month (inclusive). Next arrow disables at this bound — e.g. cap at the current month. */
+    maxValue?: MonthPickerValue;
     /** BCP 47 locale tag. Built-in: 'en' | 'es' | 'pt' | 'fr'. For other locales supply formatLabel. */
     locale?: string;
     /** Custom label formatter. Takes precedence over locale. */
     formatLabel?: (value: MonthPickerValue) => string;
     style?: ViewStyle;
 }
-declare function MonthPicker({ value, onChange, locale, formatLabel, style }: MonthPickerProps): React.JSX.Element;
+declare function MonthPicker({ value, onChange, minValue, maxValue, locale, formatLabel, style }: MonthPickerProps): React.JSX.Element;
 
-export { MonthPicker, type MonthPickerProps, type MonthPickerValue };
+export { MonthPicker, type MonthPickerProps, type MonthPickerValue, dateToMonthPickerValue, monthPickerValueToDate };

package/dist/MonthPicker.js

@@ -9,18 +9,65 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React2__default = /*#__PURE__*/_interopDefault(React2);
 
-// src/components/MonthPicker/MonthPicker.tsx
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
 var _haptics = null;
+var _hapticsLoaded = false;
 async function getHaptics() {
   if (reactNative.Platform.OS === "web") return null;
-  if (!_haptics) {
-    _haptics = await import('expo-haptics');
+  if (!_hapticsLoaded) {
+    _hapticsLoaded = true;
+    try {
+      _haptics = await import('expo-haptics');
+    } catch {
+      _haptics = null;
+    }
   }
   return _haptics;
 }
+var _pulsar = null;
+var _pulsarChecked = false;
+var _pulsarAvailable = false;
+function isPulsarNativeRegistered() {
+  try {
+    const g = globalThis;
+    if (typeof g.__turboModuleProxy === "function") {
+      return g.__turboModuleProxy("RNPulsar") != null;
+    }
+    return reactNative.NativeModules?.RNPulsar != null;
+  } catch {
+    return false;
+  }
+}
+function getPulsar() {
+  if (reactNative.Platform.OS === "web") return null;
+  if (!_pulsarChecked) {
+    _pulsarChecked = true;
+    try {
+      if (isPulsarNativeRegistered()) {
+        _pulsar = __require("react-native-pulsar");
+        _pulsarAvailable = true;
+      }
+    } catch {
+      _pulsar = null;
+      _pulsarAvailable = false;
+    }
+  }
+  return _pulsarAvailable ? _pulsar : null;
+}
 function selectionAsync() {
   if (reactNative.Platform.OS === "web") return;
-  getHaptics().then((h) => h?.selectionAsync());
+  getHaptics().then((h) => {
+    if (h) {
+      h.selectionAsync();
+    } else {
+      getPulsar()?.Presets.System.selection();
+    }
+  });
 }
 
 // src/theme/colorUtils.ts
@@ -153,38 +200,47 @@ var MONTH_NAMES = {
   pt: ["janeiro", "fevereiro", "mar\xE7o", "abril", "maio", "junho", "julho", "agosto", "setembro", "outubro", "novembro", "dezembro"],
   fr: ["janvier", "f\xE9vrier", "mars", "avril", "mai", "juin", "juillet", "ao\xFBt", "septembre", "octobre", "novembre", "d\xE9cembre"]
 };
-function MonthPicker({ value, onChange, locale = "en", formatLabel, style }) {
+function dateToMonthPickerValue(date) {
+  return { month: date.getMonth() + 1, year: date.getFullYear() };
+}
+function monthPickerValueToDate(value) {
+  return new Date(value.year, value.month - 1, 1);
+}
+var toIndex = (v) => v.year * 12 + (v.month - 1);
+var fromIndex = (i) => ({ year: Math.floor(i / 12), month: i % 12 + 1 });
+function MonthPicker({ value, onChange, minValue, maxValue, locale = "en", formatLabel, style }) {
   const { colors } = useTheme();
+  const index = toIndex(value);
+  const minIndex = minValue ? toIndex(minValue) : -Infinity;
+  const maxIndex = maxValue ? toIndex(maxValue) : Infinity;
+  const prevDisabled = index - 1 < minIndex;
+  const nextDisabled = index + 1 > maxIndex;
   const getLabel = () => {
     if (formatLabel) return formatLabel(value);
     const names = MONTH_NAMES[locale] ?? MONTH_NAMES.en;
     return `${names[value.month - 1]} ${value.year}`;
   };
   const handlePrev = () => {
+    if (prevDisabled) return;
     selectionAsync();
-    if (value.month === 1) {
-      onChange({ month: 12, year: value.year - 1 });
-    } else {
-      onChange({ month: value.month - 1, year: value.year });
-    }
+    onChange(fromIndex(index - 1));
   };
   const handleNext = () => {
+    if (nextDisabled) return;
     selectionAsync();
-    if (value.month === 12) {
-      onChange({ month: 1, year: value.year + 1 });
-    } else {
-      onChange({ month: value.month + 1, year: value.year });
-    }
+    onChange(fromIndex(index + 1));
   };
   return /* @__PURE__ */ React2__default.default.createElement(reactNative.View, { style: [styles.container, style], accessibilityRole: "adjustable", accessibilityLabel: getLabel() }, /* @__PURE__ */ React2__default.default.createElement(
     reactNative.TouchableOpacity,
     {
-      style: styles.arrow,
+      style: [styles.arrow, prevDisabled && styles.arrowDisabled],
       onPress: handlePrev,
+      disabled: prevDisabled,
       activeOpacity: 0.6,
       touchSoundDisabled: true,
       accessibilityRole: "button",
       accessibilityLabel: "Previous month",
+      accessibilityState: { disabled: prevDisabled },
       hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }
     },
     /* @__PURE__ */ React2__default.default.createElement(vectorIcons.Entypo, { name: "chevron-left", size: 22, color: colors.foreground })
@@ -199,12 +255,14 @@ function MonthPicker({ value, onChange, locale = "en", formatLabel, style }) {
   ), /* @__PURE__ */ React2__default.default.createElement(
     reactNative.TouchableOpacity,
     {
-      style: styles.arrow,
+      style: [styles.arrow, nextDisabled && styles.arrowDisabled],
       onPress: handleNext,
+      disabled: nextDisabled,
       activeOpacity: 0.6,
       touchSoundDisabled: true,
       accessibilityRole: "button",
       accessibilityLabel: "Next month",
+      accessibilityState: { disabled: nextDisabled },
       hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }
     },
     /* @__PURE__ */ React2__default.default.createElement(vectorIcons.Entypo, { name: "chevron-right", size: 22, color: colors.foreground })
@@ -222,6 +280,9 @@ var styles = reactNative.StyleSheet.create({
     alignItems: "center",
     justifyContent: "center"
   },
+  arrowDisabled: {
+    opacity: 0.3
+  },
   label: {
     fontFamily: "Sohne-Medium",
     fontSize: ms(17),
@@ -232,3 +293,5 @@ var styles = reactNative.StyleSheet.create({
 });
 
 exports.MonthPicker = MonthPicker;
+exports.dateToMonthPickerValue = dateToMonthPickerValue;
+exports.monthPickerValueToDate = monthPickerValueToDate;

package/dist/MonthPicker.mjs

@@ -1,4 +1,5 @@
-export { MonthPicker } from './chunk-RKLHUDZS.mjs';
-import './chunk-RTC3CFXF.mjs';
+export { MonthPicker, dateToMonthPickerValue, monthPickerValueToDate } from './chunk-GD6KXMG5.mjs';
+import './chunk-EJ7ZPXOH.mjs';
 import './chunk-SOYNZDVY.mjs';
 import './chunk-2CE3TQVY.mjs';
+import './chunk-Y6FXYEAI.mjs';

package/dist/PagerDots.d.mts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+
+interface PagerDotsProps {
+    /** Total number of pages. */
+    count: number;
+    /** Index of the active page (0-based). */
+    activeIndex: number;
+    /** Called when a dot is tapped — omit to make dots non-interactive. */
+    onDotPress?: (index: number) => void;
+    /** Show previous/next buttons. If function provided, called on button press. If `true`, uses `onDotPress(activeIndex ± 1)`. */
+    showControls?: boolean | {
+        onPrevious?: () => void;
+        onNext?: () => void;
+    };
+    /** Diameter of an inactive dot (dp). Defaults to 8. */
+    dotSize?: number;
+    /** Gap between dots (dp). Defaults to 8. */
+    spacing?: number;
+    /** Active dot color. Defaults to theme `primary`. */
+    activeColor?: string;
+    /** Inactive dot color. Defaults to theme `border`. */
+    inactiveColor?: string;
+    style?: ViewStyle;
+}
+/**
+ * Animated page indicator for carousels / document pagers. The active dot
+ * stretches into a pill and color-crossfades — all on the UI thread.
+ *
+ * @example
+ * <PagerDots count={pages.length} activeIndex={page} onDotPress={setPage} />
+ */
+declare function PagerDots({ count, activeIndex, onDotPress, showControls, dotSize, spacing, activeColor, inactiveColor, style, }: PagerDotsProps): React.JSX.Element;
+
+export { PagerDots, type PagerDotsProps };

package/dist/PagerDots.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+
+interface PagerDotsProps {
+    /** Total number of pages. */
+    count: number;
+    /** Index of the active page (0-based). */
+    activeIndex: number;
+    /** Called when a dot is tapped — omit to make dots non-interactive. */
+    onDotPress?: (index: number) => void;
+    /** Show previous/next buttons. If function provided, called on button press. If `true`, uses `onDotPress(activeIndex ± 1)`. */
+    showControls?: boolean | {
+        onPrevious?: () => void;
+        onNext?: () => void;
+    };
+    /** Diameter of an inactive dot (dp). Defaults to 8. */
+    dotSize?: number;
+    /** Gap between dots (dp). Defaults to 8. */
+    spacing?: number;
+    /** Active dot color. Defaults to theme `primary`. */
+    activeColor?: string;
+    /** Inactive dot color. Defaults to theme `border`. */
+    inactiveColor?: string;
+    style?: ViewStyle;
+}
+/**
+ * Animated page indicator for carousels / document pagers. The active dot
+ * stretches into a pill and color-crossfades — all on the UI thread.
+ *
+ * @example
+ * <PagerDots count={pages.length} activeIndex={page} onDotPress={setPage} />
+ */
+declare function PagerDots({ count, activeIndex, onDotPress, showControls, dotSize, spacing, activeColor, inactiveColor, style, }: PagerDotsProps): React.JSX.Element;
+
+export { PagerDots, type PagerDotsProps };