@korsolutions/ui 0.0.20 → 0.0.21

package/dist/components/index.d.mts

@@ -1,4 +1,6 @@
-import { D as BadgeStyles, I as AvatarStyles, S as TextareaPrimitiveBaseProps, V as EmptyStyles, d as PopoverTriggerRef, dt as ButtonStyles, et as SelectRootBaseProps, gt as InputStyles, h as DropdownMenuStyles, j as ToastStyles, lt as ButtonPrimitiveRootProps, mt as InputPrimitiveBaseProps, nt as SelectStyles, q as CardStyles, s as PopoverStyles, w as TextareaStyles, yt as FieldStyles } from "../index-CGY0mO6z.mjs";
+import { D as BadgeStyles, I as AvatarStyles, S as TextareaPrimitiveBaseProps, V as EmptyStyles, d as PopoverTriggerRef, dt as ButtonStyles, et as SelectRootBaseProps, gt as InputStyles, h as DropdownMenuStyles, j as ToastStyles, lt as ButtonPrimitiveRootProps, mt as InputPrimitiveBaseProps, nt as SelectStyles, q as CardStyles, s as PopoverStyles, w as TextareaStyles, yt as FieldStyles } from "../index-pCM7YTs1.mjs";
+import "../use-relative-position-DBzhrBU7.mjs";
+import { t as NumericMaskFormat } from "../use-numeric-mask-B9WZG25o.mjs";
 import React from "react";
 import { ImageSource, PressableProps, TextProps, TextStyle } from "react-native";
 
@@ -49,6 +51,35 @@ interface InputProps extends InputPrimitiveBaseProps {
 }
 declare function Input(props: InputProps): React.JSX.Element;
 //#endregion
+//#region src/components/input/numeric-input.d.ts
+interface NumericInputProps extends Omit<InputPrimitiveBaseProps, "value" | "onChange" | "keyboardType"> {
+  variant?: "default";
+  value?: number | null;
+  onChange?: (value: number | null) => void;
+  format?: NumericMaskFormat;
+  locale?: string;
+  currency?: string;
+  precision?: number;
+  min?: number;
+  max?: number;
+  allowNegative?: boolean;
+}
+declare function NumericInput({
+  value,
+  onChange,
+  format,
+  locale,
+  currency,
+  precision,
+  min,
+  max,
+  allowNegative,
+  variant,
+  onBlur,
+  onFocus,
+  ...props
+}: NumericInputProps): React.JSX.Element;
+//#endregion
 //#region src/components/field/variants/index.d.ts
 declare const FieldVariants: {
   default: () => FieldStyles;
@@ -262,4 +293,4 @@ interface PopoverProps {
 }
 declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<PopoverTriggerRef>>;
 //#endregion
-export { Avatar, AvatarProps, Badge, Button, Card, DropdownMenu, Empty, EmptyProps, Field, FieldProps, Input, Link, LinkProps, Popover, PopoverProps, Select, SelectOption, SelectProps, Textarea, Toast, Typography, TypographyProps };
+export { Avatar, AvatarProps, Badge, Button, Card, DropdownMenu, Empty, EmptyProps, Field, FieldProps, Input, Link, LinkProps, NumericInput, NumericInputProps, Popover, PopoverProps, Select, SelectOption, SelectProps, Textarea, Toast, Typography, TypographyProps };

package/dist/components/index.mjs

@@ -1,6 +1,8 @@
-import { i as useThemedStyles, r as ToastComponent, t as ToastAPI } from "../toast-manager-DSo9oN8w.mjs";
-import { a as BadgePrimitive, c as EmptyPrimitive, d as ButtonPrimitive, f as InputPrimitive, i as TextareaPrimitive, l as CardPrimitive, n as usePopover, p as FieldPrimitive, r as DropdownMenuPrimitive, s as AvatarPrimitive, t as PopoverPrimitive, u as SelectPrimitive } from "../primitives-P_8clvQr.mjs";
-import React, { forwardRef, useState } from "react";
+import { i as useThemedStyles, r as ToastComponent, t as ToastAPI } from "../toast-manager-BfoJ-_dB.mjs";
+import { a as BadgePrimitive, c as EmptyPrimitive, d as ButtonPrimitive, f as InputPrimitive, i as TextareaPrimitive, l as CardPrimitive, n as usePopover, p as FieldPrimitive, r as DropdownMenuPrimitive, s as AvatarPrimitive, t as PopoverPrimitive, u as SelectPrimitive } from "../primitives-DNeYBN-3.mjs";
+import "../use-relative-position-BTKEyT1F.mjs";
+import { t as useNumericMask } from "../use-numeric-mask-BQlz1Pus.mjs";
+import React, { forwardRef, useEffect, useState } from "react";
 import { Linking, Text } from "react-native";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -205,6 +207,41 @@ function Input(props) {
 	});
 }
 
+//#endregion
+//#region src/components/input/numeric-input.tsx
+function NumericInput({ value, onChange, format = "decimal", locale = "en-US", currency = "USD", precision = 2, min, max, allowNegative = true, variant = "default", onBlur, onFocus, ...props }) {
+	const numericMask = useNumericMask({
+		format,
+		locale,
+		currency,
+		precision,
+		min,
+		max,
+		allowNegative,
+		onChange
+	});
+	useEffect(() => {
+		if (value !== numericMask.numericValue) numericMask.setValue(value ?? null);
+	}, [value]);
+	const handleBlur = (e) => {
+		numericMask.onBlur();
+		onBlur?.(e);
+	};
+	const handleFocus = (e) => {
+		numericMask.onFocus();
+		onFocus?.(e);
+	};
+	return /* @__PURE__ */ jsx(Input, {
+		...props,
+		variant,
+		value: numericMask.value,
+		onChange: numericMask.onChangeText,
+		onBlur: handleBlur,
+		onFocus: handleFocus,
+		keyboardType: numericMask.keyboardType
+	});
+}
+
 //#endregion
 //#region src/components/field/variants/default.tsx
 const useFieldVariantDefault = () => {
@@ -790,4 +827,4 @@ PopoverComponent.displayName = "Popover";
 const Popover = PopoverComponent;
 
 //#endregion
-export { Avatar, Badge, Button, Card, DropdownMenu, Empty, Field, Input, Link, Popover, Select, Textarea, Toast, Typography };
+export { Avatar, Badge, Button, Card, DropdownMenu, Empty, Field, Input, Link, NumericInput, Popover, Select, Textarea, Toast, Typography };

package/dist/hooks/index.d.mts

@@ -1,4 +1,7 @@
-//#region src/hooks/useScreenSize.d.ts
+import { i as useRelativePosition, n as DEFAULT_POSITION, r as LayoutPosition, t as DEFAULT_LAYOUT } from "../use-relative-position-DBzhrBU7.mjs";
+import { i as useNumericMask, n as UseNumericMaskOptions, r as UseNumericMaskReturn, t as NumericMaskFormat } from "../use-numeric-mask-B9WZG25o.mjs";
+
+//#region src/hooks/use-screen-size.d.ts
 type ScreenSize = "mobile" | "tablet" | "desktop";
 interface Response {
   readonly size: ScreenSize;
@@ -14,4 +17,31 @@ interface Response {
 }
 declare function useScreenSize(): Response;
 //#endregion
-export { ScreenSize, useScreenSize };
+//#region src/hooks/use-currency-mask.d.ts
+interface UseCurrencyMaskOptions {
+  locale?: string;
+  currency?: string;
+  precision?: number;
+  min?: number;
+  max?: number;
+  onValueChange?: (value: number | null) => void;
+}
+interface UseCurrencyMaskReturn {
+  value: string;
+  numericValue: number | null;
+  onChangeText: (text: string) => void;
+  onBlur: () => void;
+  onFocus: () => void;
+  keyboardType: "decimal-pad";
+  setValue: (value: number | null) => void;
+}
+declare function useCurrencyMask({
+  locale,
+  currency,
+  precision,
+  min,
+  max,
+  onValueChange
+}?: UseCurrencyMaskOptions): UseCurrencyMaskReturn;
+//#endregion
+export { DEFAULT_LAYOUT, DEFAULT_POSITION, LayoutPosition, NumericMaskFormat, ScreenSize, UseCurrencyMaskOptions, UseCurrencyMaskReturn, UseNumericMaskOptions, UseNumericMaskReturn, useCurrencyMask, useNumericMask, useRelativePosition, useScreenSize };

package/dist/hooks/index.mjs

@@ -1,6 +1,9 @@
+import { n as DEFAULT_POSITION, r as useRelativePosition, t as DEFAULT_LAYOUT } from "../use-relative-position-BTKEyT1F.mjs";
+import { t as useNumericMask } from "../use-numeric-mask-BQlz1Pus.mjs";
+import { useCallback, useState } from "react";
 import { useWindowDimensions } from "react-native";
 
-//#region src/hooks/useScreenSize.ts
+//#region src/hooks/use-screen-size.ts
 function useScreenSize() {
 	const windowDimensions = useWindowDimensions();
 	const size = windowDimensions.width < 768 ? "mobile" : windowDimensions.width < 1024 ? "tablet" : "desktop";
@@ -23,4 +26,78 @@ function useScreenSize() {
 }
 
 //#endregion
-export { useScreenSize };
+//#region src/hooks/use-currency-mask.ts
+function useCurrencyMask({ locale = "en-US", currency = "USD", precision = 2, min, max, onValueChange } = {}) {
+	const [numericValue, setNumericValue] = useState(null);
+	const [displayValue, setDisplayValue] = useState("");
+	const [isFocused, setIsFocused] = useState(false);
+	const formatCurrency = useCallback((num) => {
+		if (num === null || isNaN(num)) return "";
+		return new Intl.NumberFormat(locale, {
+			style: "currency",
+			currency,
+			minimumFractionDigits: precision,
+			maximumFractionDigits: precision
+		}).format(num);
+	}, [
+		locale,
+		currency,
+		precision
+	]);
+	const parseCurrency = useCallback((text) => {
+		const cleaned = text.replace(/[^\d.-]/g, "");
+		const parsed = parseFloat(cleaned);
+		if (isNaN(parsed) || cleaned === "") return null;
+		let constrained = parsed;
+		if (min !== void 0 && constrained < min) constrained = min;
+		if (max !== void 0 && constrained > max) constrained = max;
+		return constrained;
+	}, [min, max]);
+	return {
+		value: displayValue,
+		numericValue,
+		onChangeText: useCallback((text) => {
+			if (isFocused) {
+				const cleaned = text.replace(/[^\d.-]/g, "");
+				const decimalIndex = cleaned.indexOf(".");
+				if (decimalIndex !== -1) {
+					if (cleaned.substring(decimalIndex + 1).length > precision) return;
+				}
+				if ((cleaned.match(/\./g) || []).length > 1) return;
+			}
+			setDisplayValue(text);
+			const value = parseCurrency(text);
+			setNumericValue(value);
+			onValueChange?.(value);
+		}, [
+			parseCurrency,
+			onValueChange,
+			isFocused,
+			precision
+		]),
+		onBlur: useCallback(() => {
+			setIsFocused(false);
+			if (numericValue !== null) setDisplayValue(formatCurrency(numericValue));
+			else setDisplayValue("");
+		}, [numericValue, formatCurrency]),
+		onFocus: useCallback(() => {
+			setIsFocused(true);
+			if (numericValue !== null) setDisplayValue(numericValue.toString());
+		}, [numericValue]),
+		keyboardType: "decimal-pad",
+		setValue: useCallback((value) => {
+			setNumericValue(value);
+			if (value !== null) if (isFocused) setDisplayValue(value.toString());
+			else setDisplayValue(formatCurrency(value));
+			else setDisplayValue("");
+			onValueChange?.(value);
+		}, [
+			isFocused,
+			formatCurrency,
+			onValueChange
+		])
+	};
+}
+
+//#endregion
+export { DEFAULT_LAYOUT, DEFAULT_POSITION, useCurrencyMask, useNumericMask, useRelativePosition, useScreenSize };

package/dist/{index-CGY0mO6z.d.mts → index-pCM7YTs1.d.mts}

@@ -1,3 +1,4 @@
+import { r as LayoutPosition } from "./use-relative-position-DBzhrBU7.mjs";
 import * as react7 from "react";
 import React$1, { Dispatch, RefAttributes } from "react";
 import { ImageSource, ImageStyle, LayoutRectangle, PressableProps, StyleProp, TextInputProps, TextProps, TextStyle, View, ViewStyle } from "react-native";
@@ -567,14 +568,6 @@ interface PopoverCloseProps extends Omit<PressableProps, "onPress"> {
 }
 declare function PopoverClose(props: PopoverCloseProps): React$1.JSX.Element;
 //#endregion
-//#region src/hooks/useRelativePosition.d.ts
-interface LayoutPosition {
-  pageY: number;
-  pageX: number;
-  width: number;
-  height: number;
-}
-//#endregion
 //#region src/primitives/popover/context.d.ts
 interface PopoverContext {
   isOpen: boolean;

package/dist/index.mjs

@@ -1,5 +1,6 @@
-import { a as ThemeProvider, n as ToastContainer, o as useTheme } from "./toast-manager-DSo9oN8w.mjs";
-import { m as PortalHost } from "./primitives-P_8clvQr.mjs";
+import { a as ThemeProvider, n as ToastContainer, o as useTheme } from "./toast-manager-BfoJ-_dB.mjs";
+import { m as PortalHost } from "./primitives-DNeYBN-3.mjs";
+import "./use-relative-position-BTKEyT1F.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/index.tsx

package/dist/primitives/index.d.mts

@@ -1,2 +1,3 @@
-import { $ as SelectPortalProps, A as ToastRootProps, B as EmptyRootProps, C as TextareaPrimitiveProps, D as BadgeStyles, E as BadgeRootProps, F as AvatarRootProps, G as CardPrimitive, H as EmptyTitleProps, I as AvatarStyles, J as CardFooterProps, K as CardRootProps, L as AvatarImageProps, M as ToastDescriptionProps, N as ToastTitleProps, O as BadgeLabelProps, P as AvatarPrimitive, Q as SelectPrimitive, R as AvatarFallbackProps, S as TextareaPrimitiveBaseProps, St as FieldLabelProps, T as BadgePrimitive, U as EmptyMediaProps, V as EmptyStyles, W as EmptyDescriptionProps, X as CardTitleProps, Y as CardBodyProps, Z as CardHeaderProps, _ as DropdownMenuDividerProps, _t as FieldPrimitive, a as PopoverPortalProps, at as SelectOverlayProps, b as DropdownMenuTriggerProps, bt as FieldErrorProps, c as PopoverOverlayProps, ct as ButtonPrimitive, d as PopoverTriggerRef, dt as ButtonStyles, et as SelectRootBaseProps, f as DropdownMenuPrimitive, ft as ButtonPrimitiveLabelProps, g as DropdownMenuOverlayProps, gt as InputStyles, h as DropdownMenuStyles, ht as InputPrimitiveProps, i as PopoverCloseProps, it as SelectContentProps, j as ToastStyles, k as ToastPrimitive, l as PopoverContentProps, lt as ButtonPrimitiveRootProps, m as DropdownMenuRootProps, mt as InputPrimitiveBaseProps, n as PopoverContext, nt as SelectStyles, o as PopoverRootProps, ot as SelectValueProps, p as DropdownMenuPortalProps, pt as InputPrimitive, q as CardStyles, r as usePopover, rt as SelectOptionProps, st as SelectTriggerProps, t as PopoverPrimitive, tt as SelectRootProps, u as PopoverTriggerProps, ut as ButtonState, v as DropdownMenuButtonProps, vt as FieldPrimitiveRootProps, w as TextareaStyles, x as TextareaPrimitive, xt as FieldDescriptionProps, y as DropdownMenuContentProps, yt as FieldStyles, z as EmptyPrimitive } from "../index-CGY0mO6z.mjs";
+import { $ as SelectPortalProps, A as ToastRootProps, B as EmptyRootProps, C as TextareaPrimitiveProps, D as BadgeStyles, E as BadgeRootProps, F as AvatarRootProps, G as CardPrimitive, H as EmptyTitleProps, I as AvatarStyles, J as CardFooterProps, K as CardRootProps, L as AvatarImageProps, M as ToastDescriptionProps, N as ToastTitleProps, O as BadgeLabelProps, P as AvatarPrimitive, Q as SelectPrimitive, R as AvatarFallbackProps, S as TextareaPrimitiveBaseProps, St as FieldLabelProps, T as BadgePrimitive, U as EmptyMediaProps, V as EmptyStyles, W as EmptyDescriptionProps, X as CardTitleProps, Y as CardBodyProps, Z as CardHeaderProps, _ as DropdownMenuDividerProps, _t as FieldPrimitive, a as PopoverPortalProps, at as SelectOverlayProps, b as DropdownMenuTriggerProps, bt as FieldErrorProps, c as PopoverOverlayProps, ct as ButtonPrimitive, d as PopoverTriggerRef, dt as ButtonStyles, et as SelectRootBaseProps, f as DropdownMenuPrimitive, ft as ButtonPrimitiveLabelProps, g as DropdownMenuOverlayProps, gt as InputStyles, h as DropdownMenuStyles, ht as InputPrimitiveProps, i as PopoverCloseProps, it as SelectContentProps, j as ToastStyles, k as ToastPrimitive, l as PopoverContentProps, lt as ButtonPrimitiveRootProps, m as DropdownMenuRootProps, mt as InputPrimitiveBaseProps, n as PopoverContext, nt as SelectStyles, o as PopoverRootProps, ot as SelectValueProps, p as DropdownMenuPortalProps, pt as InputPrimitive, q as CardStyles, r as usePopover, rt as SelectOptionProps, st as SelectTriggerProps, t as PopoverPrimitive, tt as SelectRootProps, u as PopoverTriggerProps, ut as ButtonState, v as DropdownMenuButtonProps, vt as FieldPrimitiveRootProps, w as TextareaStyles, x as TextareaPrimitive, xt as FieldDescriptionProps, y as DropdownMenuContentProps, yt as FieldStyles, z as EmptyPrimitive } from "../index-pCM7YTs1.mjs";
+import "../use-relative-position-DBzhrBU7.mjs";
 export { AvatarFallbackProps, AvatarImageProps, AvatarPrimitive, AvatarRootProps, AvatarStyles, BadgeLabelProps, BadgePrimitive, BadgeRootProps, BadgeStyles, ButtonPrimitive, ButtonPrimitiveLabelProps, ButtonPrimitiveRootProps, ButtonState, ButtonStyles, CardBodyProps, CardFooterProps, CardHeaderProps, CardPrimitive, CardRootProps, CardStyles, CardTitleProps, DropdownMenuButtonProps, DropdownMenuContentProps, DropdownMenuDividerProps, DropdownMenuOverlayProps, DropdownMenuPortalProps, DropdownMenuPrimitive, DropdownMenuRootProps, DropdownMenuStyles, DropdownMenuTriggerProps, EmptyDescriptionProps, EmptyMediaProps, EmptyPrimitive, EmptyRootProps, EmptyStyles, EmptyTitleProps, FieldDescriptionProps, FieldErrorProps, FieldLabelProps, FieldPrimitive, FieldPrimitiveRootProps, FieldStyles, InputPrimitive, InputPrimitiveBaseProps, InputPrimitiveProps, InputStyles, PopoverCloseProps, PopoverContentProps, PopoverContext, PopoverOverlayProps, PopoverPortalProps, PopoverPrimitive, PopoverRootProps, PopoverTriggerProps, PopoverTriggerRef, SelectContentProps, SelectOptionProps, SelectOverlayProps, SelectPortalProps, SelectPrimitive, SelectRootBaseProps, SelectRootProps, SelectStyles, SelectTriggerProps, SelectValueProps, TextareaPrimitive, TextareaPrimitiveBaseProps, TextareaPrimitiveProps, TextareaStyles, ToastDescriptionProps, ToastPrimitive, ToastRootProps, ToastStyles, ToastTitleProps, usePopover };

package/dist/primitives/index.mjs

@@ -1,3 +1,4 @@
-import { a as BadgePrimitive, c as EmptyPrimitive, d as ButtonPrimitive, f as InputPrimitive, i as TextareaPrimitive, l as CardPrimitive, n as usePopover, o as ToastPrimitive, p as FieldPrimitive, r as DropdownMenuPrimitive, s as AvatarPrimitive, t as PopoverPrimitive, u as SelectPrimitive } from "../primitives-P_8clvQr.mjs";
+import { a as BadgePrimitive, c as EmptyPrimitive, d as ButtonPrimitive, f as InputPrimitive, i as TextareaPrimitive, l as CardPrimitive, n as usePopover, o as ToastPrimitive, p as FieldPrimitive, r as DropdownMenuPrimitive, s as AvatarPrimitive, t as PopoverPrimitive, u as SelectPrimitive } from "../primitives-DNeYBN-3.mjs";
+import "../use-relative-position-BTKEyT1F.mjs";
 
 export { AvatarPrimitive, BadgePrimitive, ButtonPrimitive, CardPrimitive, DropdownMenuPrimitive, EmptyPrimitive, FieldPrimitive, InputPrimitive, PopoverPrimitive, SelectPrimitive, TextareaPrimitive, ToastPrimitive, usePopover };

package/dist/{primitives-P_8clvQr.mjs → primitives-DNeYBN-3.mjs}

@@ -1,6 +1,6 @@
-import * as React$1 from "react";
-import React, { createContext, forwardRef, useContext, useEffect, useImperativeHandle, useRef, useState, useSyncExternalStore } from "react";
-import { ActivityIndicator, Image, Pressable, StyleSheet, Text, TextInput, View, useWindowDimensions } from "react-native";
+import { n as DEFAULT_POSITION, r as useRelativePosition, t as DEFAULT_LAYOUT } from "./use-relative-position-BTKEyT1F.mjs";
+import React, { createContext, forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useRef, useState, useSyncExternalStore } from "react";
+import { ActivityIndicator, Image, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
 import { Fragment, jsx } from "react/jsx-runtime";
 
 //#region src/primitives/portal/portal.tsx
@@ -752,108 +752,6 @@ const useDropdownMenu = () => {
 	return context;
 };
 
-//#endregion
-//#region src/hooks/useRelativePosition.ts
-function useRelativePosition({ align, avoidCollisions, triggerPosition, contentLayout, alignOffset, insets, sideOffset, side }) {
-	const dimensions = useWindowDimensions();
-	return React$1.useMemo(() => {
-		if (!triggerPosition || !contentLayout) return {
-			position: "absolute",
-			opacity: 0,
-			top: dimensions.height,
-			zIndex: -9999999
-		};
-		return getContentStyle({
-			align,
-			avoidCollisions,
-			contentLayout,
-			side,
-			triggerPosition,
-			alignOffset,
-			insets,
-			sideOffset,
-			dimensions
-		});
-	}, [
-		align,
-		avoidCollisions,
-		side,
-		alignOffset,
-		insets,
-		triggerPosition,
-		contentLayout,
-		dimensions.width,
-		dimensions.height
-	]);
-}
-const DEFAULT_LAYOUT = {
-	x: 0,
-	y: 0,
-	width: 0,
-	height: 0
-};
-const DEFAULT_POSITION = {
-	height: 0,
-	width: 0,
-	pageX: 0,
-	pageY: 0
-};
-function getSidePosition({ side, triggerPosition, contentLayout, sideOffset, insets, avoidCollisions, dimensions }) {
-	const insetTop = insets?.top ?? 0;
-	const insetBottom = insets?.bottom ?? 0;
-	const positionTop = triggerPosition?.pageY - sideOffset - contentLayout.height;
-	const positionBottom = triggerPosition.pageY + triggerPosition.height + sideOffset;
-	if (!avoidCollisions) return { top: side === "top" ? positionTop : positionBottom };
-	if (side === "top") return { top: Math.min(Math.max(insetTop, positionTop), dimensions.height - insetBottom - contentLayout.height) };
-	return { top: Math.min(dimensions.height - insetBottom - contentLayout.height, positionBottom) };
-}
-function getAlignPosition({ align, avoidCollisions, contentLayout, triggerPosition, alignOffset, insets, dimensions }) {
-	const insetLeft = insets?.left ?? 0;
-	const insetRight = insets?.right ?? 0;
-	const maxContentWidth = dimensions.width - insetLeft - insetRight;
-	const contentWidth = Math.min(contentLayout.width, maxContentWidth);
-	let left = getLeftPosition(align, triggerPosition.pageX, triggerPosition.width, contentWidth, alignOffset, insetLeft, insetRight, dimensions);
-	if (avoidCollisions) {
-		if (left < insetLeft || left + contentWidth > dimensions.width - insetRight) {
-			const spaceLeft = left - insetLeft;
-			const spaceRight = dimensions.width - insetRight - (left + contentWidth);
-			if (spaceLeft > spaceRight && spaceLeft >= contentWidth) left = insetLeft;
-			else if (spaceRight >= contentWidth) left = dimensions.width - insetRight - contentWidth;
-			else left = Math.max(insetLeft, (dimensions.width - contentWidth - insetRight) / 2);
-		}
-	}
-	return {
-		left,
-		maxWidth: maxContentWidth
-	};
-}
-function getLeftPosition(align, triggerPageX, triggerWidth, contentWidth, alignOffset, insetLeft, insetRight, dimensions) {
-	let left = 0;
-	if (align === "start") left = triggerPageX;
-	if (align === "center") left = triggerPageX + triggerWidth / 2 - contentWidth / 2;
-	if (align === "end") left = triggerPageX + triggerWidth - contentWidth;
-	return Math.max(insetLeft, Math.min(left + alignOffset, dimensions.width - contentWidth - insetRight));
-}
-function getContentStyle({ align, avoidCollisions, contentLayout, side, triggerPosition, alignOffset, insets, sideOffset, dimensions }) {
-	return Object.assign({ position: "absolute" }, getSidePosition({
-		side,
-		triggerPosition,
-		contentLayout,
-		sideOffset,
-		insets,
-		avoidCollisions,
-		dimensions
-	}), getAlignPosition({
-		align,
-		avoidCollisions,
-		triggerPosition,
-		contentLayout,
-		alignOffset,
-		insets,
-		dimensions
-	}));
-}
-
 //#endregion
 //#region src/primitives/dropdown-menu/dropdown-menu-root.tsx
 function DropdownMenuRoot(props) {

package/dist/{toast-manager-DSo9oN8w.mjs → toast-manager-BfoJ-_dB.mjs}

@@ -1,4 +1,4 @@
-import { o as ToastPrimitive } from "./primitives-P_8clvQr.mjs";
+import { o as ToastPrimitive } from "./primitives-DNeYBN-3.mjs";
 import React, { createContext, useContext, useEffect, useState, useSyncExternalStore } from "react";
 import { StyleSheet, View, useColorScheme } from "react-native";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/use-numeric-mask-B9WZG25o.d.mts

@@ -0,0 +1,33 @@
+//#region src/hooks/use-numeric-mask.d.ts
+type NumericMaskFormat = "currency" | "decimal" | "integer" | "percentage";
+interface UseNumericMaskOptions {
+  format?: NumericMaskFormat;
+  locale?: string;
+  currency?: string;
+  precision?: number;
+  min?: number;
+  max?: number;
+  allowNegative?: boolean;
+  onChange?: (value: number | null) => void;
+}
+interface UseNumericMaskReturn {
+  value: string;
+  numericValue: number | null;
+  onChangeText: (text: string) => void;
+  onBlur: () => void;
+  onFocus: () => void;
+  keyboardType: "numeric" | "decimal-pad" | "number-pad";
+  setValue: (value: number | null) => void;
+}
+declare function useNumericMask({
+  format,
+  locale,
+  currency,
+  precision,
+  min,
+  max,
+  allowNegative,
+  onChange
+}?: UseNumericMaskOptions): UseNumericMaskReturn;
+//#endregion
+export { useNumericMask as i, UseNumericMaskOptions as n, UseNumericMaskReturn as r, NumericMaskFormat as t };

package/dist/use-numeric-mask-BQlz1Pus.mjs

@@ -0,0 +1,113 @@
+import { useCallback, useState } from "react";
+
+//#region src/hooks/use-numeric-mask.ts
+function useNumericMask({ format = "decimal", locale = "en-US", currency = "USD", precision = 2, min, max, allowNegative = true, onChange } = {}) {
+	const [numericValue, setNumericValue] = useState(null);
+	const [displayValue, setDisplayValue] = useState("");
+	const [isFocused, setIsFocused] = useState(false);
+	const effectivePrecision = format === "integer" ? 0 : precision;
+	const formatValue = useCallback((num) => {
+		if (num === null || isNaN(num)) return "";
+		switch (format) {
+			case "currency": return new Intl.NumberFormat(locale, {
+				style: "currency",
+				currency,
+				minimumFractionDigits: effectivePrecision,
+				maximumFractionDigits: effectivePrecision
+			}).format(num);
+			case "percentage": return new Intl.NumberFormat(locale, {
+				style: "percent",
+				minimumFractionDigits: effectivePrecision,
+				maximumFractionDigits: effectivePrecision
+			}).format(num / 100);
+			case "integer": return new Intl.NumberFormat(locale, {
+				minimumFractionDigits: 0,
+				maximumFractionDigits: 0
+			}).format(num);
+			case "decimal":
+			default: return new Intl.NumberFormat(locale, {
+				minimumFractionDigits: effectivePrecision,
+				maximumFractionDigits: effectivePrecision
+			}).format(num);
+		}
+	}, [
+		format,
+		locale,
+		currency,
+		effectivePrecision
+	]);
+	const parseValue = useCallback((text) => {
+		let cleaned = text.replace(/[^\d.-]/g, "");
+		if (!allowNegative) cleaned = cleaned.replace(/-/g, "");
+		const parsed = parseFloat(cleaned);
+		if (isNaN(parsed) || cleaned === "" || cleaned === "-") return null;
+		let constrained = parsed;
+		if (min !== void 0 && constrained < min) constrained = min;
+		if (max !== void 0 && constrained > max) constrained = max;
+		return constrained;
+	}, [
+		min,
+		max,
+		allowNegative
+	]);
+	const handleChangeText = useCallback((text) => {
+		if (isFocused) {
+			let cleaned = text.replace(/[^\d.-]/g, "");
+			if (!allowNegative && cleaned.includes("-")) return;
+			if (allowNegative) {
+				if ((cleaned.match(/-/g) || []).length > 1 || cleaned.includes("-") && cleaned.indexOf("-") !== 0) return;
+			}
+			if (effectivePrecision >= 0) {
+				const decimalIndex = cleaned.indexOf(".");
+				if (decimalIndex !== -1) {
+					if (cleaned.substring(decimalIndex + 1).length > effectivePrecision) return;
+				}
+				if ((cleaned.match(/\./g) || []).length > 1) return;
+				if (format === "integer" && cleaned.includes(".")) return;
+			}
+		}
+		setDisplayValue(text);
+		const value = parseValue(text);
+		setNumericValue(value);
+		onChange?.(value);
+	}, [
+		parseValue,
+		onChange,
+		isFocused,
+		effectivePrecision,
+		allowNegative,
+		format
+	]);
+	const handleBlur = useCallback(() => {
+		setIsFocused(false);
+		if (numericValue !== null) setDisplayValue(formatValue(numericValue));
+		else setDisplayValue("");
+	}, [numericValue, formatValue]);
+	const handleFocus = useCallback(() => {
+		setIsFocused(true);
+		if (numericValue !== null) setDisplayValue(numericValue.toString());
+	}, [numericValue]);
+	const setValue = useCallback((value) => {
+		setNumericValue(value);
+		if (value !== null) if (isFocused) setDisplayValue(value.toString());
+		else setDisplayValue(formatValue(value));
+		else setDisplayValue("");
+		onChange?.(value);
+	}, [
+		isFocused,
+		formatValue,
+		onChange
+	]);
+	return {
+		value: displayValue,
+		numericValue,
+		onChangeText: handleChangeText,
+		onBlur: handleBlur,
+		onFocus: handleFocus,
+		keyboardType: format === "integer" ? allowNegative ? "numeric" : "number-pad" : "decimal-pad",
+		setValue
+	};
+}
+
+//#endregion
+export { useNumericMask as t };

package/dist/use-relative-position-BTKEyT1F.mjs

@@ -0,0 +1,106 @@
+import * as React$1 from "react";
+import { useWindowDimensions } from "react-native";
+
+//#region src/hooks/use-relative-position.ts
+function useRelativePosition({ align, avoidCollisions, triggerPosition, contentLayout, alignOffset, insets, sideOffset, side }) {
+	const dimensions = useWindowDimensions();
+	return React$1.useMemo(() => {
+		if (!triggerPosition || !contentLayout) return {
+			position: "absolute",
+			opacity: 0,
+			top: dimensions.height,
+			zIndex: -9999999
+		};
+		return getContentStyle({
+			align,
+			avoidCollisions,
+			contentLayout,
+			side,
+			triggerPosition,
+			alignOffset,
+			insets,
+			sideOffset,
+			dimensions
+		});
+	}, [
+		align,
+		avoidCollisions,
+		side,
+		alignOffset,
+		insets,
+		triggerPosition,
+		contentLayout,
+		dimensions.width,
+		dimensions.height
+	]);
+}
+const DEFAULT_LAYOUT = {
+	x: 0,
+	y: 0,
+	width: 0,
+	height: 0
+};
+const DEFAULT_POSITION = {
+	height: 0,
+	width: 0,
+	pageX: 0,
+	pageY: 0
+};
+function getSidePosition({ side, triggerPosition, contentLayout, sideOffset, insets, avoidCollisions, dimensions }) {
+	const insetTop = insets?.top ?? 0;
+	const insetBottom = insets?.bottom ?? 0;
+	const positionTop = triggerPosition?.pageY - sideOffset - contentLayout.height;
+	const positionBottom = triggerPosition.pageY + triggerPosition.height + sideOffset;
+	if (!avoidCollisions) return { top: side === "top" ? positionTop : positionBottom };
+	if (side === "top") return { top: Math.min(Math.max(insetTop, positionTop), dimensions.height - insetBottom - contentLayout.height) };
+	return { top: Math.min(dimensions.height - insetBottom - contentLayout.height, positionBottom) };
+}
+function getAlignPosition({ align, avoidCollisions, contentLayout, triggerPosition, alignOffset, insets, dimensions }) {
+	const insetLeft = insets?.left ?? 0;
+	const insetRight = insets?.right ?? 0;
+	const maxContentWidth = dimensions.width - insetLeft - insetRight;
+	const contentWidth = Math.min(contentLayout.width, maxContentWidth);
+	let left = getLeftPosition(align, triggerPosition.pageX, triggerPosition.width, contentWidth, alignOffset, insetLeft, insetRight, dimensions);
+	if (avoidCollisions) {
+		if (left < insetLeft || left + contentWidth > dimensions.width - insetRight) {
+			const spaceLeft = left - insetLeft;
+			const spaceRight = dimensions.width - insetRight - (left + contentWidth);
+			if (spaceLeft > spaceRight && spaceLeft >= contentWidth) left = insetLeft;
+			else if (spaceRight >= contentWidth) left = dimensions.width - insetRight - contentWidth;
+			else left = Math.max(insetLeft, (dimensions.width - contentWidth - insetRight) / 2);
+		}
+	}
+	return {
+		left,
+		maxWidth: maxContentWidth
+	};
+}
+function getLeftPosition(align, triggerPageX, triggerWidth, contentWidth, alignOffset, insetLeft, insetRight, dimensions) {
+	let left = 0;
+	if (align === "start") left = triggerPageX;
+	if (align === "center") left = triggerPageX + triggerWidth / 2 - contentWidth / 2;
+	if (align === "end") left = triggerPageX + triggerWidth - contentWidth;
+	return Math.max(insetLeft, Math.min(left + alignOffset, dimensions.width - contentWidth - insetRight));
+}
+function getContentStyle({ align, avoidCollisions, contentLayout, side, triggerPosition, alignOffset, insets, sideOffset, dimensions }) {
+	return Object.assign({ position: "absolute" }, getSidePosition({
+		side,
+		triggerPosition,
+		contentLayout,
+		sideOffset,
+		insets,
+		avoidCollisions,
+		dimensions
+	}), getAlignPosition({
+		align,
+		avoidCollisions,
+		triggerPosition,
+		contentLayout,
+		alignOffset,
+		insets,
+		dimensions
+	}));
+}
+
+//#endregion
+export { DEFAULT_POSITION as n, useRelativePosition as r, DEFAULT_LAYOUT as t };

package/dist/use-relative-position-DBzhrBU7.d.mts

@@ -0,0 +1,61 @@
+import { LayoutRectangle, ScaledSize } from "react-native";
+
+//#region src/hooks/use-relative-position.d.ts
+interface Insets {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+}
+type UseRelativePositionArgs = Omit<GetContentStyleArgs, "triggerPosition" | "contentLayout" | "dimensions"> & {
+  triggerPosition: LayoutPosition | null;
+  contentLayout: LayoutRectangle | null;
+};
+declare function useRelativePosition({
+  align,
+  avoidCollisions,
+  triggerPosition,
+  contentLayout,
+  alignOffset,
+  insets,
+  sideOffset,
+  side
+}: UseRelativePositionArgs): ({
+  readonly position: "absolute";
+} & {
+  top: number;
+} & {
+  left: number;
+  maxWidth: number;
+}) | {
+  readonly position: "absolute";
+  readonly opacity: 0;
+  readonly top: number;
+  readonly zIndex: -9999999;
+};
+interface LayoutPosition {
+  pageY: number;
+  pageX: number;
+  width: number;
+  height: number;
+}
+interface GetPositionArgs {
+  dimensions: ScaledSize;
+  avoidCollisions: boolean;
+  triggerPosition: LayoutPosition;
+  contentLayout: LayoutRectangle;
+  insets?: Insets;
+}
+interface GetSidePositionArgs extends GetPositionArgs {
+  side: "top" | "bottom";
+  sideOffset: number;
+}
+declare const DEFAULT_LAYOUT: LayoutRectangle;
+declare const DEFAULT_POSITION: LayoutPosition;
+interface GetAlignPositionArgs extends GetPositionArgs {
+  align: "start" | "center" | "end";
+  alignOffset: number;
+}
+type GetContentStyleArgs = GetPositionArgs & GetSidePositionArgs & GetAlignPositionArgs;
+//#endregion
+export { useRelativePosition as i, DEFAULT_POSITION as n, LayoutPosition as r, DEFAULT_LAYOUT as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@korsolutions/ui",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "license": "MIT",
   "main": "dist/index.mjs",
   "module": "dist/index.mjs",

package/src/components/index.ts

@@ -1,6 +1,6 @@
 export * from "./button/button";
 export * from "./card/card";
-export * from "./input/input";
+export * from "./input";
 export * from "./field/field";
 export * from "./select/select";
 export * from "./typography/typography";

package/src/components/input/index.ts

@@ -0,0 +1,2 @@
+export * from "./input";
+export * from "./numeric-input";

package/src/components/input/numeric-input.tsx

@@ -0,0 +1,73 @@
+import React, { useEffect } from "react";
+import { Input } from "./input";
+import { InputPrimitiveBaseProps } from "@/primitives";
+import { useNumericMask, NumericMaskFormat } from "@/hooks/use-numeric-mask";
+
+export interface NumericInputProps extends Omit<InputPrimitiveBaseProps, "value" | "onChange" | "keyboardType"> {
+  variant?: "default";
+  value?: number | null;
+  onChange?: (value: number | null) => void;
+  format?: NumericMaskFormat;
+  locale?: string;
+  currency?: string;
+  precision?: number;
+  min?: number;
+  max?: number;
+  allowNegative?: boolean;
+}
+
+export function NumericInput({
+  value,
+  onChange,
+  format = "decimal",
+  locale = "en-US",
+  currency = "USD",
+  precision = 2,
+  min,
+  max,
+  allowNegative = true,
+  variant = "default",
+  onBlur,
+  onFocus,
+  ...props
+}: NumericInputProps) {
+  const numericMask = useNumericMask({
+    format,
+    locale,
+    currency,
+    precision,
+    min,
+    max,
+    allowNegative,
+    onChange,
+  });
+
+  // Sync external value changes with internal state
+  useEffect(() => {
+    if (value !== numericMask.numericValue) {
+      numericMask.setValue(value ?? null);
+    }
+  }, [value]);
+
+  const handleBlur = (e: any) => {
+    numericMask.onBlur();
+    onBlur?.(e);
+  };
+
+  const handleFocus = (e: any) => {
+    numericMask.onFocus();
+    onFocus?.(e);
+  };
+
+  return (
+    <Input
+      {...props}
+      variant={variant}
+      value={numericMask.value}
+      onChange={numericMask.onChangeText}
+      onBlur={handleBlur}
+      onFocus={handleFocus}
+      keyboardType={numericMask.keyboardType}
+    />
+  );
+}

package/src/hooks/index.ts

@@ -1 +1,4 @@
-export * from "./useScreenSize";
+export * from "./use-screen-size";
+export * from "./use-currency-mask";
+export * from "./use-numeric-mask";
+export * from "./use-relative-position";

package/src/hooks/use-currency-mask.ts

@@ -0,0 +1,141 @@
+import { useState, useCallback } from "react";
+
+export interface UseCurrencyMaskOptions {
+  locale?: string;
+  currency?: string;
+  precision?: number;
+  min?: number;
+  max?: number;
+  onValueChange?: (value: number | null) => void;
+}
+
+export interface UseCurrencyMaskReturn {
+  value: string;
+  numericValue: number | null;
+  onChangeText: (text: string) => void;
+  onBlur: () => void;
+  onFocus: () => void;
+  keyboardType: "decimal-pad";
+  setValue: (value: number | null) => void;
+}
+
+export function useCurrencyMask({
+  locale = "en-US",
+  currency = "USD",
+  precision = 2,
+  min,
+  max,
+  onValueChange,
+}: UseCurrencyMaskOptions = {}): UseCurrencyMaskReturn {
+  const [numericValue, setNumericValue] = useState<number | null>(null);
+  const [displayValue, setDisplayValue] = useState("");
+  const [isFocused, setIsFocused] = useState(false);
+
+  const formatCurrency = useCallback(
+    (num: number | null): string => {
+      if (num === null || isNaN(num)) return "";
+
+      return new Intl.NumberFormat(locale, {
+        style: "currency",
+        currency,
+        minimumFractionDigits: precision,
+        maximumFractionDigits: precision,
+      }).format(num);
+    },
+    [locale, currency, precision]
+  );
+
+  const parseCurrency = useCallback(
+    (text: string): number | null => {
+      // Remove currency symbols, spaces, and thousand separators
+      const cleaned = text.replace(/[^\d.-]/g, "");
+      const parsed = parseFloat(cleaned);
+
+      if (isNaN(parsed) || cleaned === "") return null;
+
+      // Apply min/max constraints
+      let constrained = parsed;
+      if (min !== undefined && constrained < min) constrained = min;
+      if (max !== undefined && constrained > max) constrained = max;
+
+      return constrained;
+    },
+    [min, max]
+  );
+
+  const handleChangeText = useCallback(
+    (text: string) => {
+      // When focused, validate decimal precision before allowing input
+      if (isFocused) {
+        // Remove currency symbols and thousand separators to get raw input
+        const cleaned = text.replace(/[^\d.-]/g, "");
+
+        // Check if input has a decimal point
+        const decimalIndex = cleaned.indexOf(".");
+        if (decimalIndex !== -1) {
+          const decimalPart = cleaned.substring(decimalIndex + 1);
+
+          // Prevent typing more decimals than allowed precision
+          if (decimalPart.length > precision) {
+            return; // Don't update state if exceeds precision
+          }
+        }
+
+        // Also prevent multiple decimal points
+        const decimalCount = (cleaned.match(/\./g) || []).length;
+        if (decimalCount > 1) {
+          return;
+        }
+      }
+
+      setDisplayValue(text);
+      const value = parseCurrency(text);
+      setNumericValue(value);
+      onValueChange?.(value);
+    },
+    [parseCurrency, onValueChange, isFocused, precision]
+  );
+
+  const handleBlur = useCallback(() => {
+    setIsFocused(false);
+    if (numericValue !== null) {
+      setDisplayValue(formatCurrency(numericValue));
+    } else {
+      setDisplayValue("");
+    }
+  }, [numericValue, formatCurrency]);
+
+  const handleFocus = useCallback(() => {
+    setIsFocused(true);
+    if (numericValue !== null) {
+      setDisplayValue(numericValue.toString());
+    }
+  }, [numericValue]);
+
+  const setValue = useCallback(
+    (value: number | null) => {
+      setNumericValue(value);
+      if (value !== null) {
+        if (isFocused) {
+          setDisplayValue(value.toString());
+        } else {
+          setDisplayValue(formatCurrency(value));
+        }
+      } else {
+        setDisplayValue("");
+      }
+      onValueChange?.(value);
+    },
+    [isFocused, formatCurrency, onValueChange]
+  );
+
+  return {
+    value: displayValue,
+    numericValue,
+    onChangeText: handleChangeText,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    keyboardType: "decimal-pad",
+    setValue,
+  };
+}

package/src/hooks/use-numeric-mask.ts

@@ -0,0 +1,202 @@
+import { useState, useCallback } from "react";
+
+export type NumericMaskFormat = "currency" | "decimal" | "integer" | "percentage";
+
+export interface UseNumericMaskOptions {
+  format?: NumericMaskFormat;
+  locale?: string;
+  currency?: string;
+  precision?: number;
+  min?: number;
+  max?: number;
+  allowNegative?: boolean;
+  onChange?: (value: number | null) => void;
+}
+
+export interface UseNumericMaskReturn {
+  value: string;
+  numericValue: number | null;
+  onChangeText: (text: string) => void;
+  onBlur: () => void;
+  onFocus: () => void;
+  keyboardType: "numeric" | "decimal-pad" | "number-pad";
+  setValue: (value: number | null) => void;
+}
+
+export function useNumericMask({
+  format = "decimal",
+  locale = "en-US",
+  currency = "USD",
+  precision = 2,
+  min,
+  max,
+  allowNegative = true,
+  onChange,
+}: UseNumericMaskOptions = {}): UseNumericMaskReturn {
+  const [numericValue, setNumericValue] = useState<number | null>(null);
+  const [displayValue, setDisplayValue] = useState("");
+  const [isFocused, setIsFocused] = useState(false);
+
+  // Determine actual precision based on format
+  const effectivePrecision = format === "integer" ? 0 : precision;
+
+  const formatValue = useCallback(
+    (num: number | null): string => {
+      if (num === null || isNaN(num)) return "";
+
+      switch (format) {
+        case "currency":
+          return new Intl.NumberFormat(locale, {
+            style: "currency",
+            currency,
+            minimumFractionDigits: effectivePrecision,
+            maximumFractionDigits: effectivePrecision,
+          }).format(num);
+
+        case "percentage":
+          return new Intl.NumberFormat(locale, {
+            style: "percent",
+            minimumFractionDigits: effectivePrecision,
+            maximumFractionDigits: effectivePrecision,
+          }).format(num / 100);
+
+        case "integer":
+          return new Intl.NumberFormat(locale, {
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 0,
+          }).format(num);
+
+        case "decimal":
+        default:
+          return new Intl.NumberFormat(locale, {
+            minimumFractionDigits: effectivePrecision,
+            maximumFractionDigits: effectivePrecision,
+          }).format(num);
+      }
+    },
+    [format, locale, currency, effectivePrecision]
+  );
+
+  const parseValue = useCallback(
+    (text: string): number | null => {
+      // Remove currency symbols, spaces, thousand separators, and percentage signs
+      let cleaned = text.replace(/[^\d.-]/g, "");
+
+      // Handle negative sign
+      if (!allowNegative) {
+        cleaned = cleaned.replace(/-/g, "");
+      }
+
+      const parsed = parseFloat(cleaned);
+
+      if (isNaN(parsed) || cleaned === "" || cleaned === "-") return null;
+
+      // Apply min/max constraints
+      let constrained = parsed;
+      if (min !== undefined && constrained < min) constrained = min;
+      if (max !== undefined && constrained > max) constrained = max;
+
+      return constrained;
+    },
+    [min, max, allowNegative]
+  );
+
+  const handleChangeText = useCallback(
+    (text: string) => {
+      // When focused, validate input before allowing it
+      if (isFocused) {
+        // Remove formatting characters to get raw input
+        let cleaned = text.replace(/[^\d.-]/g, "");
+
+        // Validate negative sign
+        if (!allowNegative && cleaned.includes("-")) {
+          return;
+        }
+
+        // Ensure negative sign is only at the start
+        if (allowNegative) {
+          const negativeCount = (cleaned.match(/-/g) || []).length;
+          if (negativeCount > 1 || (cleaned.includes("-") && cleaned.indexOf("-") !== 0)) {
+            return;
+          }
+        }
+
+        // Check decimal precision (skip for integer format)
+        if (effectivePrecision >= 0) {
+          const decimalIndex = cleaned.indexOf(".");
+          if (decimalIndex !== -1) {
+            const decimalPart = cleaned.substring(decimalIndex + 1);
+
+            // Prevent typing more decimals than allowed precision
+            if (decimalPart.length > effectivePrecision) {
+              return;
+            }
+          }
+
+          // Prevent multiple decimal points
+          const decimalCount = (cleaned.match(/\./g) || []).length;
+          if (decimalCount > 1) {
+            return;
+          }
+
+          // Prevent decimal point for integer format
+          if (format === "integer" && cleaned.includes(".")) {
+            return;
+          }
+        }
+      }
+
+      setDisplayValue(text);
+      const value = parseValue(text);
+      setNumericValue(value);
+      onChange?.(value);
+    },
+    [parseValue, onChange, isFocused, effectivePrecision, allowNegative, format]
+  );
+
+  const handleBlur = useCallback(() => {
+    setIsFocused(false);
+    if (numericValue !== null) {
+      setDisplayValue(formatValue(numericValue));
+    } else {
+      setDisplayValue("");
+    }
+  }, [numericValue, formatValue]);
+
+  const handleFocus = useCallback(() => {
+    setIsFocused(true);
+    if (numericValue !== null) {
+      setDisplayValue(numericValue.toString());
+    }
+  }, [numericValue]);
+
+  const setValue = useCallback(
+    (value: number | null) => {
+      setNumericValue(value);
+      if (value !== null) {
+        if (isFocused) {
+          setDisplayValue(value.toString());
+        } else {
+          setDisplayValue(formatValue(value));
+        }
+      } else {
+        setDisplayValue("");
+      }
+      onChange?.(value);
+    },
+    [isFocused, formatValue, onChange]
+  );
+
+  // Determine keyboard type based on format
+  const keyboardType = format === "integer" ? (allowNegative ? ("numeric" as const) : ("number-pad" as const)) : ("decimal-pad" as const);
+
+  return {
+    value: displayValue,
+    numericValue,
+    onChangeText: handleChangeText,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    keyboardType,
+    setValue,
+  };
+}

package/src/primitives/dropdown-menu/context.ts

@@ -1,7 +1,7 @@
 import { createContext, Dispatch, useContext } from "react";
 import { LayoutRectangle } from "react-native";
 import { DropdownMenuStyles } from "./types";
-import { LayoutPosition } from "@/hooks/useRelativePosition";
+import { LayoutPosition } from "@/hooks/use-relative-position";
 
 export interface DropdownMenuContext {
   isOpen: boolean;

package/src/primitives/dropdown-menu/dropdown-menu-content.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { StyleProp, View, ViewStyle } from "react-native";
 import { useDropdownMenu } from "./context";
-import { useRelativePosition } from "@/hooks/useRelativePosition";
+import { useRelativePosition } from "@/hooks/use-relative-position";
 
 export interface DropdownMenuContentProps {
   children?: React.ReactNode;

package/src/primitives/dropdown-menu/dropdown-menu-root.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { LayoutRectangle } from "react-native";
 import { DropdownMenuStyles } from "./types";
 import { DropdownMenuContext } from "./context";
-import { DEFAULT_LAYOUT, DEFAULT_POSITION, LayoutPosition } from "@/hooks/useRelativePosition";
+import { DEFAULT_LAYOUT, DEFAULT_POSITION, LayoutPosition } from "@/hooks/use-relative-position";
 
 export interface DropdownMenuRootProps {
   children?: React.ReactNode;

package/src/primitives/popover/context.ts

@@ -1,7 +1,7 @@
 import { createContext, Dispatch, useContext } from "react";
 import { PopoverStyles } from "./types";
 import { LayoutRectangle } from "react-native";
-import { LayoutPosition } from "@/hooks/useRelativePosition";
+import { LayoutPosition } from "@/hooks/use-relative-position";
 
 export interface PopoverContext {
   isOpen: boolean;

package/src/primitives/popover/popover-content.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { StyleProp, View, ViewStyle } from "react-native";
 import { usePopover } from "./context";
-import { useRelativePosition } from "@/hooks/useRelativePosition";
+import { useRelativePosition } from "@/hooks/use-relative-position";
 
 export interface PopoverContentProps {
   children?: React.ReactNode;

package/src/primitives/popover/popover-root.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { PopoverContext } from "./context";
 import { PopoverStyles } from "./types";
 import { LayoutRectangle } from "react-native";
-import { DEFAULT_LAYOUT, DEFAULT_POSITION, LayoutPosition } from "@/hooks/useRelativePosition";
+import { DEFAULT_LAYOUT, DEFAULT_POSITION, LayoutPosition } from "@/hooks/use-relative-position";
 
 export interface PopoverRootProps {
   children?: React.ReactNode;