@retray-dev/ui-kit 10.1.0 → 12.1.0

package/dist/{chunk-LXJIIOYQ.mjs → chunk-LRM4AVYY.mjs}

@@ -1,7 +1,7 @@
 import { impactLight } from './chunk-EJ7ZPXOH.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
-import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
+import { useTheme } from './chunk-EMUWGDWC.mjs';
 import { ms, vs, s, mvs } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';

package/dist/{chunk-VQ57HWPL.mjs → chunk-MYZ2EDYU.mjs}

@@ -2,8 +2,8 @@ import { usePressScale } from './chunk-YNROWHQJ.mjs';
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { PRESS_SCALE, COLOR_TRANSITION } from './chunk-DVK4G2GT.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
-import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
+import { useTheme } from './chunk-EMUWGDWC.mjs';
 import { ms, s, vs } from './chunk-2CE3TQVY.mjs';
 import React, { useCallback } from 'react';
 import { TouchableOpacity, View, Text, StyleSheet, ScrollView } from 'react-native';

package/dist/chunk-N4ZPVCJH.mjs

@@ -0,0 +1,126 @@
+import { PressableButton } from './chunk-3DKJ2GIC.mjs';
+import { impactLight } from './chunk-EJ7ZPXOH.mjs';
+import { RADIUS } from './chunk-QY3X2UYR.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
+import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { s, mvs, ms } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+
+var sizeConfig = {
+  sm: { button: s(40), icon: 16, valueFontSize: ms(18), valueLineHeight: mvs(24), valueMinWidth: s(32) },
+  md: { button: s(44), icon: 18, valueFontSize: ms(22), valueLineHeight: mvs(28), valueMinWidth: s(36) },
+  lg: { button: s(52), icon: 22, valueFontSize: ms(26), valueLineHeight: mvs(32), valueMinWidth: s(40) }
+};
+function NumberStepperBase({
+  value,
+  onValueChange,
+  min = 1,
+  max = 99,
+  step = 1,
+  size = "md",
+  disabled = false,
+  style,
+  accessibilityLabel
+}) {
+  const { colors } = useTheme();
+  const canDecrement = value > min && !disabled;
+  const canIncrement = value < max && !disabled;
+  const handleDecrement = () => {
+    if (!canDecrement) return;
+    impactLight();
+    onValueChange(Math.max(min, value - step));
+  };
+  const handleIncrement = () => {
+    if (!canIncrement) return;
+    impactLight();
+    onValueChange(Math.min(max, value + step));
+  };
+  const { button: buttonSize, icon: iconSize, valueFontSize, valueLineHeight, valueMinWidth } = sizeConfig[size];
+  const displayValue = String(value);
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.container, style] }, /* @__PURE__ */ React.createElement(
+    PressableButton,
+    {
+      style: [
+        styles.button,
+        {
+          width: buttonSize,
+          height: buttonSize,
+          backgroundColor: colors.surface,
+          borderColor: colors.border
+        },
+        !canDecrement && styles.buttonDisabled
+      ],
+      enabled: canDecrement,
+      onPress: handleDecrement,
+      rippleColor: "transparent",
+      touchSoundDisabled: true,
+      accessibilityRole: "button",
+      accessibilityLabel: `Decrease, current value ${displayValue}`,
+      accessibilityState: { disabled: !canDecrement }
+    },
+    renderIcon("minus", iconSize, canDecrement ? colors.foreground : colors.foregroundMuted)
+  ), /* @__PURE__ */ React.createElement(
+    Text,
+    {
+      style: [
+        styles.value,
+        {
+          color: colors.foreground,
+          fontSize: valueFontSize,
+          lineHeight: valueLineHeight,
+          minWidth: valueMinWidth
+        }
+      ],
+      allowFontScaling: true,
+      accessibilityLabel: accessibilityLabel ?? `Quantity: ${displayValue}`,
+      accessibilityRole: "text"
+    },
+    displayValue
+  ), /* @__PURE__ */ React.createElement(
+    PressableButton,
+    {
+      style: [
+        styles.button,
+        {
+          width: buttonSize,
+          height: buttonSize,
+          backgroundColor: colors.surface,
+          borderColor: colors.border
+        },
+        !canIncrement && styles.buttonDisabled
+      ],
+      enabled: canIncrement,
+      onPress: handleIncrement,
+      rippleColor: "transparent",
+      touchSoundDisabled: true,
+      accessibilityRole: "button",
+      accessibilityLabel: `Increase, current value ${displayValue}`,
+      accessibilityState: { disabled: !canIncrement }
+    },
+    renderIcon("plus", iconSize, canIncrement ? colors.foreground : colors.foregroundMuted)
+  ));
+}
+var NumberStepper = React.memo(NumberStepperBase);
+var styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: s(12)
+  },
+  button: {
+    borderRadius: RADIUS.md,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1.5
+  },
+  buttonDisabled: {
+    opacity: 0.35
+  },
+  value: {
+    fontFamily: "Sohne-Medium",
+    textAlign: "center"
+  }
+});
+
+export { NumberStepper };

package/dist/{chunk-NA7PARID.mjs → chunk-NXI4YDZ2.mjs}

@@ -2,8 +2,8 @@ import { usePressScale } from './chunk-YNROWHQJ.mjs';
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { PRESS_SCALE } from './chunk-DVK4G2GT.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
-import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
+import { useTheme } from './chunk-EMUWGDWC.mjs';
 import { mvs, ms, vs, s } from './chunk-2CE3TQVY.mjs';
 import React, { useState } from 'react';
 import { StyleSheet, ScrollView, View, TouchableOpacity, Text } from 'react-native';

package/dist/{chunk-4K625MVM.mjs → chunk-OULVKTWL.mjs}

@@ -1,7 +1,7 @@
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { SPRINGS } from './chunk-DVK4G2GT.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
-import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
+import { useTheme } from './chunk-EMUWGDWC.mjs';
 import { s } from './chunk-2CE3TQVY.mjs';
 import React, { useEffect } from 'react';
 import { StyleSheet, View, TouchableOpacity } from 'react-native';

package/dist/{chunk-A4MDAP7G.mjs → chunk-P64WHW4A.mjs}

@@ -1,5 +1,5 @@
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
-import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
+import { useTheme } from './chunk-EMUWGDWC.mjs';
 import { mvs, ms, s } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';

package/dist/{chunk-URI2WBIV.mjs → chunk-P73V2EKS.mjs}

@@ -2,8 +2,8 @@ import { PressableChip } from './chunk-3DKJ2GIC.mjs';
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { COLOR_TRANSITION } from './chunk-DVK4G2GT.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
-import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
+import { useTheme } from './chunk-EMUWGDWC.mjs';
 import { ms, mvs, s, vs } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text, ScrollView } from 'react-native';

package/dist/{chunk-ZUR7AU5R.mjs → chunk-PGERH3P7.mjs}

@@ -1,6 +1,6 @@
 import { COLOR_TRANSITION } from './chunk-DVK4G2GT.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
-import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
+import { useTheme } from './chunk-EMUWGDWC.mjs';
 import { ms, s, vs } from './chunk-2CE3TQVY.mjs';
 import React, { useState } from 'react';
 import { Platform, StyleSheet, TouchableOpacity, View, Text, TextInput } from 'react-native';

package/dist/{chunk-2UYENBLV.mjs → chunk-QSFV2P7O.mjs}

@@ -1,4 +1,4 @@
-import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { useTheme } from './chunk-EMUWGDWC.mjs';
 import { ms, vs, s } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { toast, Toaster } from 'sonner-native';

package/dist/{chunk-JT7HKXRB.mjs → chunk-S3KJCPEJ.mjs}

@@ -1,4 +1,4 @@
-import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { useTheme } from './chunk-EMUWGDWC.mjs';
 import { s, ms } from './chunk-2CE3TQVY.mjs';
 import React, { useState } from 'react';
 import { StyleSheet, View, Image, Text } from 'react-native';

package/dist/{chunk-6MKGPAR2.mjs → chunk-V6NFJXKO.mjs}

@@ -1,6 +1,6 @@
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
-import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
+import { useTheme } from './chunk-EMUWGDWC.mjs';
 import { s, vs, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';

package/dist/{chunk-A3A6KNQN.mjs → chunk-WOEWGSTU.mjs}

@@ -1,7 +1,7 @@
 import { usePressScale } from './chunk-YNROWHQJ.mjs';
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { PRESS_SCALE } from './chunk-DVK4G2GT.mjs';
-import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { useTheme } from './chunk-EMUWGDWC.mjs';
 import { ms, vs, s } from './chunk-2CE3TQVY.mjs';
 import React, { useState, useRef } from 'react';
 import { Platform, StyleSheet, View, Text, TouchableOpacity, Modal } from 'react-native';

package/dist/{chunk-JUXSWN54.mjs → chunk-X26S5EVZ.mjs}

@@ -1,4 +1,4 @@
-import { Input } from './chunk-ZUR7AU5R.mjs';
+import { Input } from './chunk-PGERH3P7.mjs';
 import { ms, vs } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 
@@ -21,7 +21,8 @@ function CurrencyInput({
   editable,
   containerStyle,
   style,
-  sheetMode
+  sheetMode,
+  ...props
 }) {
   const handleChange = (text) => {
     const withoutPrefix = prefix && text.startsWith(prefix) ? text.slice(prefix.length) : text;
@@ -42,6 +43,7 @@ function CurrencyInput({
   return /* @__PURE__ */ React.createElement(
     Input,
     {
+      ...props,
       value: displayValue,
       onChangeText: handleChange,
       keyboardType: "numeric",

package/dist/{chunk-YFZ3ELX5.mjs → chunk-XBAGGKLW.mjs}

@@ -1,5 +1,5 @@
-import { ToastProvider } from './chunk-2UYENBLV.mjs';
-import { ThemeProvider } from './chunk-SOYNZDVY.mjs';
+import { ToastProvider } from './chunk-QSFV2P7O.mjs';
+import { ThemeProvider } from './chunk-EMUWGDWC.mjs';
 import React from 'react';
 import { StyleSheet } from 'react-native';
 import { SafeAreaProvider, initialWindowMetrics } from 'react-native-safe-area-context';

package/dist/{chunk-JB67UOB5.mjs → chunk-ZHMSAYLT.mjs}

@@ -1,5 +1,5 @@
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
-import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
+import { useTheme } from './chunk-EMUWGDWC.mjs';
 import { mvs, ms, s } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';

package/dist/fonts.d.mts

@@ -30,11 +30,5 @@
 declare const SohneFontNames: readonly ["Sohne-ExtraLight", "Sohne-ExtraLightItalic", "Sohne-Light", "Sohne-LightItalic", "Sohne-Regular", "Sohne-Italic", "Sohne-Medium", "Sohne-MediumItalic", "Sohne-SemiBold", "Sohne-SemiBoldItalic", "Sohne-Bold", "Sohne-BoldItalic", "Sohne-ExtraBold", "Sohne-ExtraBoldItalic", "SohneMono-ExtraLight", "SohneMono-ExtraLightItalic", "SohneMono-Light", "SohneMono-LightItalic", "SohneMono-Regular", "SohneMono-Italic", "SohneMono-Medium", "SohneMono-MediumItalic", "SohneMono-SemiBold", "SohneMono-SemiBoldItalic", "SohneMono-Bold", "SohneMono-BoldItalic", "SohneMono-ExtraBold", "SohneMono-ExtraBoldItalic"];
 /** Type for any valid Sohne font family name */
 type SohneFontName = (typeof SohneFontNames)[number];
-/**
- * @deprecated SohneFonts export removed in v10.0.0.
- * Metro cannot resolve require() calls from node_modules reliably.
- * Copy the static SohneFonts boilerplate from CONSUMER.md into your App.tsx instead.
- */
-declare const SohneFonts: undefined;
 
-export { type SohneFontName, SohneFontNames, SohneFonts };
+export { type SohneFontName, SohneFontNames };

package/dist/fonts.d.ts

@@ -30,11 +30,5 @@
 declare const SohneFontNames: readonly ["Sohne-ExtraLight", "Sohne-ExtraLightItalic", "Sohne-Light", "Sohne-LightItalic", "Sohne-Regular", "Sohne-Italic", "Sohne-Medium", "Sohne-MediumItalic", "Sohne-SemiBold", "Sohne-SemiBoldItalic", "Sohne-Bold", "Sohne-BoldItalic", "Sohne-ExtraBold", "Sohne-ExtraBoldItalic", "SohneMono-ExtraLight", "SohneMono-ExtraLightItalic", "SohneMono-Light", "SohneMono-LightItalic", "SohneMono-Regular", "SohneMono-Italic", "SohneMono-Medium", "SohneMono-MediumItalic", "SohneMono-SemiBold", "SohneMono-SemiBoldItalic", "SohneMono-Bold", "SohneMono-BoldItalic", "SohneMono-ExtraBold", "SohneMono-ExtraBoldItalic"];
 /** Type for any valid Sohne font family name */
 type SohneFontName = (typeof SohneFontNames)[number];
-/**
- * @deprecated SohneFonts export removed in v10.0.0.
- * Metro cannot resolve require() calls from node_modules reliably.
- * Copy the static SohneFonts boilerplate from CONSUMER.md into your App.tsx instead.
- */
-declare const SohneFonts: undefined;
 
-export { type SohneFontName, SohneFontNames, SohneFonts };
+export { type SohneFontName, SohneFontNames };

package/dist/fonts.js

@@ -33,7 +33,5 @@ var SohneFontNames = [
   "SohneMono-ExtraBold",
   "SohneMono-ExtraBoldItalic"
 ];
-var SohneFonts = void 0;
 
 exports.SohneFontNames = SohneFontNames;
-exports.SohneFonts = SohneFonts;

package/dist/fonts.mjs

@@ -33,6 +33,5 @@ var SohneFontNames = [
   "SohneMono-ExtraBold",
   "SohneMono-ExtraBoldItalic"
 ];
-var SohneFonts = void 0;
 
-export { SohneFontNames, SohneFonts };
+export { SohneFontNames };

package/dist/index.d.mts

@@ -51,6 +51,9 @@ export { TabBar, TabBarItem, TabBarProps } from './TabBar.mjs';
 export { ImageViewer, ImageViewerProps } from './ImageViewer.mjs';
 export { SheetSelect, SheetSelectOption, SheetSelectProps } from './SheetSelect.mjs';
 export { ImageUpload, ImageUploadProps } from './ImageUpload.mjs';
+export { IconPicker, IconPickerProps } from './IconPicker.mjs';
+export { NumberStepper, NumberStepperProps, NumberStepperSize } from './NumberStepper.mjs';
+export { Stats, StatsGroupProps, StatsProps, StatsVariant } from './Stats.mjs';
 export { BottomSheetModalProvider, BottomSheetTextInput as SheetTextInput } from '@gorhom/bottom-sheet';
 export { toast } from 'sonner-native';
 import 'react-native';
@@ -97,9 +100,12 @@ interface IconProps {
  * @example configureIconFamilies(['Feather', 'MaterialIcons'])
  */
 declare function configureIconFamilies(families: IconFamily[]): void;
+declare function getValidIconNames(families?: IconFamily[]): string[];
 declare function Icon({ name, size, color, family }: IconProps): React.ReactElement | null;
 declare function renderIcon(name: string, size: number, color: string): React.ReactElement | null;
 
+declare function withAlpha(hex: string, alpha: number): string;
+
 /**
  * Returns a font size that steps down as formatted text grows longer.
  * Designed for currency/numeric displays where long values overflow.
@@ -386,4 +392,4 @@ type RadiusKey = keyof Radius;
 type Typography = typeof TYPOGRAPHY;
 type TypographyKey = keyof Typography;
 
-export { BREAKPOINTS, ColorScheme, ICON_SIZES, Icon, type IconFamily, type IconProps, type IconSize, type IconSizeKey, RADIUS, type Radius, type RadiusKey, ResolvedColors, SHADOWS, SPACING, type Spacing, type SpacingKey, TYPOGRAPHY, Theme, ThemeColors, ThemeProvider, type ThemeProviderProps, type Typography, type TypographyKey, type UseConfirmDialogOptions, type UseConfirmDialogResult, configureIconFamilies, defaultDark, defaultLight, deriveColors, getResponsiveFontSize, impactHeavy, impactLight, impactMedium, notificationError, notificationSuccess, notificationWarning, renderIcon, richHaptics, selectionAsync, useConfirmDialog, useTheme };
+export { BREAKPOINTS, ColorScheme, ICON_SIZES, Icon, type IconFamily, type IconProps, type IconSize, type IconSizeKey, RADIUS, type Radius, type RadiusKey, ResolvedColors, SHADOWS, SPACING, type Spacing, type SpacingKey, TYPOGRAPHY, Theme, ThemeColors, ThemeProvider, type ThemeProviderProps, type Typography, type TypographyKey, type UseConfirmDialogOptions, type UseConfirmDialogResult, configureIconFamilies, defaultDark, defaultLight, deriveColors, getResponsiveFontSize, getValidIconNames, impactHeavy, impactLight, impactMedium, notificationError, notificationSuccess, notificationWarning, renderIcon, richHaptics, selectionAsync, useConfirmDialog, useTheme, withAlpha };

package/dist/index.d.ts

@@ -51,6 +51,9 @@ export { TabBar, TabBarItem, TabBarProps } from './TabBar.js';
 export { ImageViewer, ImageViewerProps } from './ImageViewer.js';
 export { SheetSelect, SheetSelectOption, SheetSelectProps } from './SheetSelect.js';
 export { ImageUpload, ImageUploadProps } from './ImageUpload.js';
+export { IconPicker, IconPickerProps } from './IconPicker.js';
+export { NumberStepper, NumberStepperProps, NumberStepperSize } from './NumberStepper.js';
+export { Stats, StatsGroupProps, StatsProps, StatsVariant } from './Stats.js';
 export { BottomSheetModalProvider, BottomSheetTextInput as SheetTextInput } from '@gorhom/bottom-sheet';
 export { toast } from 'sonner-native';
 import 'react-native';
@@ -97,9 +100,12 @@ interface IconProps {
  * @example configureIconFamilies(['Feather', 'MaterialIcons'])
  */
 declare function configureIconFamilies(families: IconFamily[]): void;
+declare function getValidIconNames(families?: IconFamily[]): string[];
 declare function Icon({ name, size, color, family }: IconProps): React.ReactElement | null;
 declare function renderIcon(name: string, size: number, color: string): React.ReactElement | null;
 
+declare function withAlpha(hex: string, alpha: number): string;
+
 /**
  * Returns a font size that steps down as formatted text grows longer.
  * Designed for currency/numeric displays where long values overflow.
@@ -386,4 +392,4 @@ type RadiusKey = keyof Radius;
 type Typography = typeof TYPOGRAPHY;
 type TypographyKey = keyof Typography;
 
-export { BREAKPOINTS, ColorScheme, ICON_SIZES, Icon, type IconFamily, type IconProps, type IconSize, type IconSizeKey, RADIUS, type Radius, type RadiusKey, ResolvedColors, SHADOWS, SPACING, type Spacing, type SpacingKey, TYPOGRAPHY, Theme, ThemeColors, ThemeProvider, type ThemeProviderProps, type Typography, type TypographyKey, type UseConfirmDialogOptions, type UseConfirmDialogResult, configureIconFamilies, defaultDark, defaultLight, deriveColors, getResponsiveFontSize, impactHeavy, impactLight, impactMedium, notificationError, notificationSuccess, notificationWarning, renderIcon, richHaptics, selectionAsync, useConfirmDialog, useTheme };
+export { BREAKPOINTS, ColorScheme, ICON_SIZES, Icon, type IconFamily, type IconProps, type IconSize, type IconSizeKey, RADIUS, type Radius, type RadiusKey, ResolvedColors, SHADOWS, SPACING, type Spacing, type SpacingKey, TYPOGRAPHY, Theme, ThemeColors, ThemeProvider, type ThemeProviderProps, type Typography, type TypographyKey, type UseConfirmDialogOptions, type UseConfirmDialogResult, configureIconFamilies, defaultDark, defaultLight, deriveColors, getResponsiveFontSize, getValidIconNames, impactHeavy, impactLight, impactMedium, notificationError, notificationSuccess, notificationWarning, renderIcon, richHaptics, selectionAsync, useConfirmDialog, useTheme, withAlpha };