@retray-dev/ui-kit 10.1.0 → 12.1.0

package/README.md

@@ -2,7 +2,7 @@
 
 A personal React Native / Expo UI component library with a built-in design system, dark mode support, haptic feedback, and smooth animations.
 
-- 51 components across 9 categories (plus the deep-import `HolographicCard`)
+- 54 components across 9 categories (plus the deep-import `HolographicCard`)
 - Light/dark theme with 12 public tokens (25 resolved) and full customization
 - Apple HIG–compliant touch targets and haptic feedback
 - Animated interactions: spring press, sliding tabs, accordion easing, animated progress
@@ -23,14 +23,14 @@ pnpm add @retray-dev/ui-kit
 Install these in your app if not already present:
 
 ```bash
-pnpm add expo-font expo-haptics expo-linear-gradient react-native-safe-area-context @gorhom/bottom-sheet react-native-reanimated react-native-gesture-handler react-native-worklets @react-native-picker/picker @react-native-community/slider @expo/vector-icons react-native-size-matters react-native-svg react-native-screens sonner-native pressto react-native-ease
+pnpm add expo-font expo-haptics expo-linear-gradient react-native-safe-area-context @gorhom/bottom-sheet react-native-reanimated react-native-gesture-handler react-native-worklets @react-native-picker/picker @react-native-community/slider @expo/vector-icons react-native-size-matters react-native-svg react-native-screens sonner-native pressto react-native-ease expo-image-picker
 ```
 
 For Expo projects, run `npx expo install` instead to get SDK-compatible versions.
 
 `pressto` is **required** — it powers the press animations on every interactive component. Omitting it crashes the import. `sonner-native` is **required** for `Toast`.
 
-**Optional:** for richer haptics in a custom dev build (not Expo Go), also `pnpm add react-native-pulsar`. The kit falls back to `expo-haptics` automatically when it is absent. For the deep-import `HolographicCard`, add `@shopify/react-native-skia expo-sensors`.
+**Optional:** for richer haptics in a custom dev build (not Expo Go), also `pnpm add react-native-pulsar`. The kit falls back to `expo-haptics` automatically when it is absent. For `ImageUpload`, add `expo-image-picker`. For the deep-import `HolographicCard`, add `@shopify/react-native-skia expo-sensors`.
 
 Add the Worklets Babel plugin to `babel.config.js` (required by `@gorhom/bottom-sheet`):
 
@@ -177,13 +177,17 @@ import { SPACING, ICON_SIZES, RADIUS, SHADOWS, BREAKPOINTS, TYPOGRAPHY } from '@
 | `BREAKPOINTS` | `wide` (700) |
 | `TYPOGRAPHY` | 16 variants: `display-hero`, `display-xl`, `display-lg`, `display-md`, `display-sm`, `title-md`, `title-sm`, `body-md`, `body-sm`, `caption`, `caption-sm`, `badge-text`, `micro-label`, `uppercase-tag`, `button-lg`, `button-sm` |
 
+### Color Utilities
+
+- **`withAlpha(color: string, alpha: number)`** — takes a hex color string (e.g., `"#6366f1"`) and an opacity value (0–1), returns an `rgba()` string. Useful for semi-transparent overlays without adding a separate token.
+
 ## Components
 
 | Category    | Components                                                                                      |
 | ----------- | ----------------------------------------------------------------------------------------------- |
-| Display     | `Text`, `Badge`, `Avatar`, `Separator`, `Spinner`, `Skeleton`, `Progress`, `CurrencyDisplay`   |
+| Display     | `Text`, `Badge`, `Avatar`, `Separator`, `Spinner`, `Skeleton`, `Progress`, `CurrencyDisplay`, `Stats` |
 | Surfaces    | `Card`, `AlertBanner`, `EmptyState`, `MediaCard`, `PricingCard`                                 |
-| Form        | `Form` (+ `Form.Field` / `Form.Section` / `Form.Footer`), `Button`, `ButtonGroup`, `IconButton`, `Input`, `CurrencyInput`, `Textarea`, `Checkbox`, `Switch`, `Toggle`, `RadioGroup`, `Select`, `Slider`, `SelectableGrid`, `SheetSelect`, `ImageUpload` |
+| Form        | `Form` (+ `Form.Field` / `Form.Section` / `Form.Footer`), `Button`, `ButtonGroup`, `IconButton`, `Input`, `CurrencyInput`, `Textarea`, `Checkbox`, `Switch`, `Toggle`, `RadioGroup`, `Select`, `Slider`, `SelectableGrid`, `SheetSelect`, `ImageUpload`, `IconPicker`, `NumberStepper` |
 | Composition | `Tabs`, `Accordion`                                                                             |
 | Navigation  | `AppHeader`, `TabBar`, `PagerDots`                                                              |
 | Overlays    | `Sheet`, `ConfirmDialog`, `ImageViewer`                                                         |
@@ -220,6 +224,11 @@ toast({ title: 'Saved', variant: 'success' })
   options={[{ label: 'Option A', value: 'a' }, { label: 'Option B', value: 'b' }]}
   placeholder="Pick one"
 />
+
+// Color utilities
+import { useTheme, withAlpha } from '@retray-dev/ui-kit'
+const { colors } = useTheme()
+;<View style={{ backgroundColor: withAlpha(colors.primary, 0.15) }} />
 ```
 
 Full props reference and more examples are available in [COMPONENTS.md](./COMPONENTS.md), which is also shipped inside the npm package for use with AI tools:

package/dist/Accordion.js

@@ -217,7 +217,7 @@ var ALL_FAMILIES = [
 ];
 var activeFamilies = ALL_FAMILIES;
 var resolvedCache = null;
-function buildCache() {
+function buildCache(families) {
   const cache = /* @__PURE__ */ new Map();
   for (const family of activeFamilies) {
     const glyphMap = family.getGlyphMap();

package/dist/Accordion.mjs

@@ -1,7 +1,7 @@
-export { Accordion } from './chunk-DJ7RN37L.mjs';
+export { Accordion } from './chunk-265G6A46.mjs';
 import './chunk-EJ7ZPXOH.mjs';
 import './chunk-DVK4G2GT.mjs';
-import './chunk-T7XZ7H7Y.mjs';
-import './chunk-SOYNZDVY.mjs';
+import './chunk-KA7LTET3.mjs';
+import './chunk-EMUWGDWC.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/AlertBanner.js

@@ -156,7 +156,7 @@ var ALL_FAMILIES = [
 ];
 var activeFamilies = ALL_FAMILIES;
 var resolvedCache = null;
-function buildCache() {
+function buildCache(families) {
   const cache = /* @__PURE__ */ new Map();
   for (const family of activeFamilies) {
     const glyphMap = family.getGlyphMap();

package/dist/AlertBanner.mjs

@@ -1,6 +1,6 @@
-export { AlertBanner } from './chunk-6MKGPAR2.mjs';
+export { AlertBanner } from './chunk-V6NFJXKO.mjs';
 import './chunk-QY3X2UYR.mjs';
-import './chunk-T7XZ7H7Y.mjs';
-import './chunk-SOYNZDVY.mjs';
+import './chunk-KA7LTET3.mjs';
+import './chunk-EMUWGDWC.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/AppHeader.js

@@ -218,7 +218,7 @@ var ALL_FAMILIES = [
 ];
 var activeFamilies = ALL_FAMILIES;
 var resolvedCache = null;
-function buildCache() {
+function buildCache(families) {
   const cache = /* @__PURE__ */ new Map();
   for (const family of activeFamilies) {
     const glyphMap = family.getGlyphMap();

package/dist/AppHeader.mjs

@@ -1,10 +1,10 @@
-export { AppHeader } from './chunk-AZJF2BLK.mjs';
-import './chunk-3U4SSNWP.mjs';
+export { AppHeader } from './chunk-ISY26JQJ.mjs';
+import './chunk-DF6DU42P.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-KA7LTET3.mjs';
+import './chunk-EMUWGDWC.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/Avatar.mjs

@@ -1,4 +1,4 @@
-export { Avatar } from './chunk-JT7HKXRB.mjs';
-import './chunk-SOYNZDVY.mjs';
+export { Avatar } from './chunk-S3KJCPEJ.mjs';
+import './chunk-EMUWGDWC.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/Badge.js

@@ -155,7 +155,7 @@ var ALL_FAMILIES = [
 ];
 var activeFamilies = ALL_FAMILIES;
 var resolvedCache = null;
-function buildCache() {
+function buildCache(families) {
   const cache = /* @__PURE__ */ new Map();
   for (const family of activeFamilies) {
     const glyphMap = family.getGlyphMap();

package/dist/Badge.mjs

@@ -1,5 +1,5 @@
-export { Badge } from './chunk-TERDKCLE.mjs';
-import './chunk-T7XZ7H7Y.mjs';
-import './chunk-SOYNZDVY.mjs';
+export { Badge } from './chunk-3UYAZ7I4.mjs';
+import './chunk-KA7LTET3.mjs';
+import './chunk-EMUWGDWC.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/Button.js

@@ -217,7 +217,7 @@ var ALL_FAMILIES = [
 ];
 var activeFamilies = ALL_FAMILIES;
 var resolvedCache = null;
-function buildCache() {
+function buildCache(families) {
   const cache = /* @__PURE__ */ new Map();
   for (const family of activeFamilies) {
     const glyphMap = family.getGlyphMap();

package/dist/Button.mjs

@@ -1,9 +1,9 @@
-export { Button } from './chunk-2TFTAWVJ.mjs';
+export { Button } from './chunk-DOGIPOF5.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-KA7LTET3.mjs';
+import './chunk-EMUWGDWC.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/Card.mjs

@@ -1,8 +1,8 @@
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-ID72TK46.mjs';
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-2CBQKU7H.mjs';
 import './chunk-3DKJ2GIC.mjs';
 import './chunk-EJ7ZPXOH.mjs';
 import './chunk-DVK4G2GT.mjs';
 import './chunk-QY3X2UYR.mjs';
-import './chunk-SOYNZDVY.mjs';
+import './chunk-EMUWGDWC.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/CategoryStrip.js

@@ -217,7 +217,7 @@ var ALL_FAMILIES = [
 ];
 var activeFamilies = ALL_FAMILIES;
 var resolvedCache = null;
-function buildCache() {
+function buildCache(families) {
   const cache = /* @__PURE__ */ new Map();
   for (const family of activeFamilies) {
     const glyphMap = family.getGlyphMap();

package/dist/CategoryStrip.mjs

@@ -1,9 +1,9 @@
-export { CategoryStrip } from './chunk-VQ57HWPL.mjs';
+export { CategoryStrip } from './chunk-MYZ2EDYU.mjs';
 import './chunk-YNROWHQJ.mjs';
 import './chunk-EJ7ZPXOH.mjs';
 import './chunk-DVK4G2GT.mjs';
 import './chunk-QY3X2UYR.mjs';
-import './chunk-T7XZ7H7Y.mjs';
-import './chunk-SOYNZDVY.mjs';
+import './chunk-KA7LTET3.mjs';
+import './chunk-EMUWGDWC.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/Checkbox.mjs

@@ -1,7 +1,7 @@
-export { Checkbox } from './chunk-AV4EMIRH.mjs';
+export { Checkbox } from './chunk-3N2M3WZL.mjs';
 import './chunk-3DKJ2GIC.mjs';
 import './chunk-EJ7ZPXOH.mjs';
 import './chunk-DVK4G2GT.mjs';
-import './chunk-SOYNZDVY.mjs';
+import './chunk-EMUWGDWC.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/Chip.js

@@ -218,7 +218,7 @@ var ALL_FAMILIES = [
 ];
 var activeFamilies = ALL_FAMILIES;
 var resolvedCache = null;
-function buildCache() {
+function buildCache(families) {
   const cache = /* @__PURE__ */ new Map();
   for (const family of activeFamilies) {
     const glyphMap = family.getGlyphMap();

package/dist/Chip.mjs

@@ -1,8 +1,8 @@
-export { Chip, ChipGroup } from './chunk-UREA2GYY.mjs';
+export { Chip, ChipGroup } from './chunk-FA2KMTH5.mjs';
 import './chunk-3DKJ2GIC.mjs';
 import './chunk-EJ7ZPXOH.mjs';
 import './chunk-DVK4G2GT.mjs';
-import './chunk-T7XZ7H7Y.mjs';
-import './chunk-SOYNZDVY.mjs';
+import './chunk-KA7LTET3.mjs';
+import './chunk-EMUWGDWC.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/ConfirmDialog.d.mts

@@ -3,20 +3,15 @@ import React from 'react';
 interface ConfirmDialogProps {
     visible: boolean;
     title: string;
-    /** Secondary text below title. */
     subtitle?: string;
-    /** @deprecated Use `subtitle` instead. */
-    description?: string;
     confirmLabel?: string;
     cancelLabel?: string;
     confirmVariant?: 'primary' | 'destructive';
-    /** Show a loading spinner in the confirm button (e.g. while async action completes). */
     loading?: boolean;
-    /** Show an X close button in the top-right corner. */
     showCloseButton?: boolean;
     onConfirm: () => void;
     onCancel: () => void;
 }
-declare function ConfirmDialog({ visible, title, subtitle, description, confirmLabel, cancelLabel, confirmVariant, loading, showCloseButton, onConfirm, onCancel, }: ConfirmDialogProps): React.JSX.Element;
+declare function ConfirmDialog({ visible, title, subtitle, confirmLabel, cancelLabel, confirmVariant, loading, showCloseButton, onConfirm, onCancel, }: ConfirmDialogProps): React.JSX.Element;
 
 export { ConfirmDialog, type ConfirmDialogProps };

package/dist/ConfirmDialog.d.ts

@@ -3,20 +3,15 @@ import React from 'react';
 interface ConfirmDialogProps {
     visible: boolean;
     title: string;
-    /** Secondary text below title. */
     subtitle?: string;
-    /** @deprecated Use `subtitle` instead. */
-    description?: string;
     confirmLabel?: string;
     cancelLabel?: string;
     confirmVariant?: 'primary' | 'destructive';
-    /** Show a loading spinner in the confirm button (e.g. while async action completes). */
     loading?: boolean;
-    /** Show an X close button in the top-right corner. */
     showCloseButton?: boolean;
     onConfirm: () => void;
     onCancel: () => void;
 }
-declare function ConfirmDialog({ visible, title, subtitle, description, confirmLabel, cancelLabel, confirmVariant, loading, showCloseButton, onConfirm, onCancel, }: ConfirmDialogProps): React.JSX.Element;
+declare function ConfirmDialog({ visible, title, subtitle, confirmLabel, cancelLabel, confirmVariant, loading, showCloseButton, onConfirm, onCancel, }: ConfirmDialogProps): React.JSX.Element;
 
 export { ConfirmDialog, type ConfirmDialogProps };

package/dist/ConfirmDialog.js

@@ -2,7 +2,8 @@
 
 var React3 = require('react');
 var reactNative = require('react-native');
-var BottomSheet = require('@gorhom/bottom-sheet');
+var bottomSheet = require('@gorhom/bottom-sheet');
+var reactNativeSafeAreaContext = require('react-native-safe-area-context');
 var vectorIcons = require('@expo/vector-icons');
 var reactNativeSizeMatters = require('react-native-size-matters');
 var AntDesign = require('@expo/vector-icons/AntDesign');
@@ -17,7 +18,6 @@ var reactNativeReanimated = require('react-native-reanimated');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React3__default = /*#__PURE__*/_interopDefault(React3);
-var BottomSheet__default = /*#__PURE__*/_interopDefault(BottomSheet);
 var AntDesign__default = /*#__PURE__*/_interopDefault(AntDesign);
 var Entypo__default = /*#__PURE__*/_interopDefault(Entypo);
 var Feather__default = /*#__PURE__*/_interopDefault(Feather);
@@ -240,7 +240,7 @@ var ALL_FAMILIES = [
 ];
 var activeFamilies = ALL_FAMILIES;
 var resolvedCache = null;
-function buildCache() {
+function buildCache(families) {
   const cache = /* @__PURE__ */ new Map();
   for (const family of activeFamilies) {
     const glyphMap = family.getGlyphMap();
@@ -457,7 +457,6 @@ function ConfirmDialog({
   visible,
   title,
   subtitle,
-  description,
   confirmLabel = "Confirm",
   cancelLabel = "Cancel",
   confirmVariant = "primary",
@@ -467,38 +466,45 @@ function ConfirmDialog({
   onCancel
 }) {
   const { colors } = useTheme();
+  const insets = reactNativeSafeAreaContext.useSafeAreaInsets();
   const ref = React3.useRef(null);
-  const effectiveSubtitle = subtitle ?? description;
+  const wasOpened = React3.useRef(false);
+  const name = React3.useId();
   React3.useEffect(() => {
     if (visible) {
       impactMedium();
-      ref.current?.snapToIndex(0);
-    } else {
-      ref.current?.close();
+      ref.current?.present();
+      wasOpened.current = true;
+    } else if (wasOpened.current) {
+      ref.current?.dismiss();
     }
   }, [visible]);
-  const renderBackdrop = (props) => /* @__PURE__ */ React3__default.default.createElement(
-    BottomSheet.BottomSheetBackdrop,
-    {
-      ...props,
-      disappearsOnIndex: -1,
-      appearsOnIndex: 0,
-      pressBehavior: "close"
-    }
+  const renderBackdrop = React3.useCallback(
+    (props) => /* @__PURE__ */ React3__default.default.createElement(
+      bottomSheet.BottomSheetBackdrop,
+      {
+        ...props,
+        disappearsOnIndex: -1,
+        appearsOnIndex: 0,
+        pressBehavior: "close"
+      }
+    ),
+    []
   );
   return /* @__PURE__ */ React3__default.default.createElement(
-    BottomSheet__default.default,
+    bottomSheet.BottomSheetModal,
     {
       ref,
-      index: -1,
-      onClose: onCancel,
+      name,
+      onDismiss: onCancel,
       enableDynamicSizing: true,
       backdropComponent: renderBackdrop,
-      backgroundStyle: [styles2.background, { backgroundColor: colors.card }],
-      handleIndicatorStyle: [styles2.handle, { backgroundColor: colors.border }],
-      enablePanDownToClose: true
+      backgroundStyle: { ...styles2.background, backgroundColor: colors.card },
+      handleIndicatorStyle: { ...styles2.handle, backgroundColor: colors.border },
+      enablePanDownToClose: true,
+      topInset: insets.top
     },
-    /* @__PURE__ */ React3__default.default.createElement(BottomSheet.BottomSheetView, { style: styles2.content }, /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles2.header, accessibilityRole: "header" }, /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles2.headerRow }, /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles2.title, { color: colors.foreground }], allowFontScaling: true }, title), showCloseButton ? /* @__PURE__ */ React3__default.default.createElement(
+    /* @__PURE__ */ React3__default.default.createElement(bottomSheet.BottomSheetView, { style: styles2.content }, /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles2.header, accessibilityRole: "header" }, /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles2.headerRow }, /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles2.title, { color: colors.foreground }], allowFontScaling: true }, title), showCloseButton ? /* @__PURE__ */ React3__default.default.createElement(
       reactNative.TouchableOpacity,
       {
         onPress: onCancel,
@@ -510,7 +516,7 @@ function ConfirmDialog({
         hitSlop: { top: 12, bottom: 12, left: 12, right: 12 }
       },
       /* @__PURE__ */ React3__default.default.createElement(vectorIcons.Feather, { name: "x", size: ms(18), color: colors.foregroundMuted })
-    ) : null), effectiveSubtitle ? /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles2.subtitle, { color: colors.foregroundMuted }], allowFontScaling: true }, effectiveSubtitle) : null), /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles2.actions }, /* @__PURE__ */ React3__default.default.createElement(
+    ) : null), subtitle ? /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles2.subtitle, { color: colors.foregroundMuted }], allowFontScaling: true }, subtitle) : null), /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles2.actions }, /* @__PURE__ */ React3__default.default.createElement(
       Button,
       {
         label: confirmLabel,

package/dist/ConfirmDialog.mjs

@@ -1,10 +1,10 @@
-export { ConfirmDialog } from './chunk-KZL5VTYK.mjs';
-import './chunk-2TFTAWVJ.mjs';
+export { ConfirmDialog } from './chunk-JCZQOY4O.mjs';
+import './chunk-DOGIPOF5.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-KA7LTET3.mjs';
+import './chunk-EMUWGDWC.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/CurrencyDisplay.mjs

@@ -1,4 +1,4 @@
-export { CurrencyDisplay } from './chunk-BRKYVJVV.mjs';
-import './chunk-SOYNZDVY.mjs';
+export { CurrencyDisplay } from './chunk-BQZE3HAW.mjs';
+import './chunk-EMUWGDWC.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/CurrencyInput.d.mts

@@ -1,9 +1,7 @@
 import React from 'react';
-import { ViewStyle, TextStyle } from 'react-native';
+import { TextInputProps, ViewStyle } from 'react-native';
 
-interface CurrencyInputProps {
-    value?: string;
-    onChangeText?: (formatted: string) => void;
+interface CurrencyInputProps extends TextInputProps {
     /** Called with the parsed numeric value (no separators, no prefix). */
     onChangeValue?: (raw: number) => void;
     /** Currency symbol shown left of the value. Any string (`'$'`, `'€'`, `'£'`, `'COP '`). Defaults to `'$'`. */
@@ -16,13 +14,10 @@ interface CurrencyInputProps {
     /** Red helper text; also changes input border to destructive color. */
     error?: string;
     hint?: string;
-    placeholder?: string;
-    editable?: boolean;
     containerStyle?: ViewStyle;
-    style?: TextStyle;
     /** Use inside a Sheet/BottomSheet — passes sheetMode to the underlying Input. */
     sheetMode?: boolean;
 }
-declare function CurrencyInput({ value, onChangeText, onChangeValue, prefix, thousandsSeparator, size, label, error, hint, placeholder, editable, containerStyle, style, sheetMode, }: CurrencyInputProps): React.JSX.Element;
+declare function CurrencyInput({ value, onChangeText, onChangeValue, prefix, thousandsSeparator, size, label, error, hint, placeholder, editable, containerStyle, style, sheetMode, ...props }: CurrencyInputProps): React.JSX.Element;
 
 export { CurrencyInput, type CurrencyInputProps };

package/dist/CurrencyInput.d.ts

@@ -1,9 +1,7 @@
 import React from 'react';
-import { ViewStyle, TextStyle } from 'react-native';
+import { TextInputProps, ViewStyle } from 'react-native';
 
-interface CurrencyInputProps {
-    value?: string;
-    onChangeText?: (formatted: string) => void;
+interface CurrencyInputProps extends TextInputProps {
     /** Called with the parsed numeric value (no separators, no prefix). */
     onChangeValue?: (raw: number) => void;
     /** Currency symbol shown left of the value. Any string (`'$'`, `'€'`, `'£'`, `'COP '`). Defaults to `'$'`. */
@@ -16,13 +14,10 @@ interface CurrencyInputProps {
     /** Red helper text; also changes input border to destructive color. */
     error?: string;
     hint?: string;
-    placeholder?: string;
-    editable?: boolean;
     containerStyle?: ViewStyle;
-    style?: TextStyle;
     /** Use inside a Sheet/BottomSheet — passes sheetMode to the underlying Input. */
     sheetMode?: boolean;
 }
-declare function CurrencyInput({ value, onChangeText, onChangeValue, prefix, thousandsSeparator, size, label, error, hint, placeholder, editable, containerStyle, style, sheetMode, }: CurrencyInputProps): React.JSX.Element;
+declare function CurrencyInput({ value, onChangeText, onChangeValue, prefix, thousandsSeparator, size, label, error, hint, placeholder, editable, containerStyle, style, sheetMode, ...props }: CurrencyInputProps): React.JSX.Element;
 
 export { CurrencyInput, type CurrencyInputProps };

package/dist/CurrencyInput.js

@@ -159,7 +159,7 @@ var ALL_FAMILIES = [
 ];
 var activeFamilies = ALL_FAMILIES;
 var resolvedCache = null;
-function buildCache() {
+function buildCache(families) {
   const cache = /* @__PURE__ */ new Map();
   for (const family of activeFamilies) {
     const glyphMap = family.getGlyphMap();
@@ -379,7 +379,8 @@ function CurrencyInput({
   editable,
   containerStyle,
   style,
-  sheetMode
+  sheetMode,
+  ...props
 }) {
   const handleChange = (text) => {
     const withoutPrefix = prefix && text.startsWith(prefix) ? text.slice(prefix.length) : text;
@@ -400,6 +401,7 @@ function CurrencyInput({
   return /* @__PURE__ */ React3__default.default.createElement(
     Input,
     {
+      ...props,
       value: displayValue,
       onChangeText: handleChange,
       keyboardType: "numeric",

package/dist/CurrencyInput.mjs

@@ -1,7 +1,7 @@
-export { CurrencyInput } from './chunk-JUXSWN54.mjs';
-import './chunk-ZUR7AU5R.mjs';
+export { CurrencyInput } from './chunk-X26S5EVZ.mjs';
+import './chunk-PGERH3P7.mjs';
 import './chunk-DVK4G2GT.mjs';
-import './chunk-T7XZ7H7Y.mjs';
-import './chunk-SOYNZDVY.mjs';
+import './chunk-KA7LTET3.mjs';
+import './chunk-EMUWGDWC.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/DetailRow.d.mts

@@ -5,7 +5,7 @@ type DetailRowSeparator = 'dotted' | 'solid' | 'dashed' | 'none';
 type DetailRowLabelWeight = 'normal' | 'medium' | 'semibold' | 'bold';
 interface DetailRowProps {
     label: React.ReactNode;
-    value: string | React.ReactNode;
+    value: string | number | React.ReactNode;
     /** Dotted/dashed/solid line between label and value. Defaults to 'dotted'. */
     separator?: DetailRowSeparator;
     labelWeight?: DetailRowLabelWeight;

package/dist/DetailRow.d.ts

@@ -5,7 +5,7 @@ type DetailRowSeparator = 'dotted' | 'solid' | 'dashed' | 'none';
 type DetailRowLabelWeight = 'normal' | 'medium' | 'semibold' | 'bold';
 interface DetailRowProps {
     label: React.ReactNode;
-    value: string | React.ReactNode;
+    value: string | number | React.ReactNode;
     /** Dotted/dashed/solid line between label and value. Defaults to 'dotted'. */
     separator?: DetailRowSeparator;
     labelWeight?: DetailRowLabelWeight;

package/dist/DetailRow.js

@@ -155,7 +155,7 @@ var ALL_FAMILIES = [
 ];
 var activeFamilies = ALL_FAMILIES;
 var resolvedCache = null;
-function buildCache() {
+function buildCache(families) {
   const cache = /* @__PURE__ */ new Map();
   for (const family of activeFamilies) {
     const glyphMap = family.getGlyphMap();

package/dist/DetailRow.mjs

@@ -1,5 +1,5 @@
-export { DetailRow } from './chunk-JB67UOB5.mjs';
-import './chunk-T7XZ7H7Y.mjs';
-import './chunk-SOYNZDVY.mjs';
+export { DetailRow } from './chunk-ZHMSAYLT.mjs';
+import './chunk-KA7LTET3.mjs';
+import './chunk-EMUWGDWC.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/EmptyState.js

@@ -163,7 +163,7 @@ var ALL_FAMILIES = [
 ];
 var activeFamilies = ALL_FAMILIES;
 var resolvedCache = null;
-function buildCache() {
+function buildCache(families) {
   const cache = /* @__PURE__ */ new Map();
   for (const family of activeFamilies) {
     const glyphMap = family.getGlyphMap();

package/dist/EmptyState.mjs

@@ -1,10 +1,10 @@
-export { EmptyState } from './chunk-6OAZJ577.mjs';
-import './chunk-2TFTAWVJ.mjs';
+export { EmptyState } from './chunk-7HSILTC4.mjs';
+import './chunk-DOGIPOF5.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-KA7LTET3.mjs';
+import './chunk-EMUWGDWC.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/ErrorBoundary.js

@@ -156,7 +156,7 @@ var ALL_FAMILIES = [
 ];
 var activeFamilies = ALL_FAMILIES;
 var resolvedCache = null;
-function buildCache() {
+function buildCache(families) {
   const cache = /* @__PURE__ */ new Map();
   for (const family of activeFamilies) {
     const glyphMap = family.getGlyphMap();

package/dist/ErrorBoundary.mjs

@@ -1,7 +1,7 @@
-export { ErrorBoundary } from './chunk-LXJIIOYQ.mjs';
+export { ErrorBoundary } from './chunk-LRM4AVYY.mjs';
 import './chunk-EJ7ZPXOH.mjs';
 import './chunk-QY3X2UYR.mjs';
-import './chunk-T7XZ7H7Y.mjs';
-import './chunk-SOYNZDVY.mjs';
+import './chunk-KA7LTET3.mjs';
+import './chunk-EMUWGDWC.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/dist/Form.mjs

@@ -1,4 +1,4 @@
-export { Form, FormField, FormFooter, FormSection } from './chunk-6Q64UFIA.mjs';
-import './chunk-SOYNZDVY.mjs';
+export { Form, FormField, FormFooter, FormSection } from './chunk-HJ46DTJE.mjs';
+import './chunk-EMUWGDWC.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';