@thewhileloop/whileui 2.0.0 → 3.0.0

package/dist/components/numeric-input/numeric-input.d.ts

@@ -1,106 +1,51 @@
 import React from 'react';
-import { TextInput, type TextInputProps } from 'react-native';
+import { type TextInputInstance, type TextInputProps } from 'react-native';
 import { type VariantProps } from '../../lib/tv';
+import type { ForwardRefComponent } from '../../lib/ref-types';
 declare const numericInputVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        error: string;
+        default: "border-border";
+        error: "border-destructive";
     };
     size: {
-        default: string;
-        compact: string;
+        default: "";
+        compact: "";
     };
-}, undefined, "w-full flex-row items-center border-border bg-muted", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "w-full flex-row items-center border-border bg-muted", {
     variant: {
-        default: string;
-        error: string;
+        default: "border-border";
+        error: "border-destructive";
     };
     size: {
-        default: string;
-        compact: string;
+        default: "";
+        compact: "";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        error: string;
+        default: "border-border";
+        error: "border-destructive";
     };
     size: {
-        default: string;
-        compact: string;
+        default: "";
+        compact: "";
     };
-}>, {
-    variant: {
-        default: string;
-        error: string;
-    };
-    size: {
-        default: string;
-        compact: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: string;
-        error: string;
-    };
-    size: {
-        default: string;
-        compact: string;
-    };
-}, undefined, "w-full flex-row items-center border-border bg-muted", import("tailwind-variants/dist/config.js").TVConfig<{
-    variant: {
-        default: string;
-        error: string;
-    };
-    size: {
-        default: string;
-        compact: string;
-    };
-}, {
-    variant: {
-        default: string;
-        error: string;
-    };
-    size: {
-        default: string;
-        compact: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 declare const numericInputTextVariants: import("tailwind-variants").TVReturnType<{
     size: {
-        default: string;
-        compact: string;
-    };
-}, undefined, "text-foreground", import("tailwind-variants/dist/config.js").TVConfig<{
-    size: {
-        default: string;
-        compact: string;
-    };
-}, {
-    size: {
-        default: string;
-        compact: string;
-    };
-}>, {
-    size: {
-        default: string;
-        compact: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    size: {
-        default: string;
-        compact: string;
+        default: "";
+        compact: "";
     };
-}, undefined, "text-foreground", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "text-foreground", {
     size: {
-        default: string;
-        compact: string;
+        default: "";
+        compact: "";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     size: {
-        default: string;
-        compact: string;
+        default: "";
+        compact: "";
     };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 export interface NumericInputProps extends Omit<TextInputProps, 'value' | 'defaultValue' | 'onChangeText' | 'keyboardType'>, VariantProps<typeof numericInputVariants> {
     className?: string;
     inputClassName?: string;
@@ -116,5 +61,5 @@ export interface NumericInputProps extends Omit<TextInputProps, 'value' | 'defau
     /** Drop the field shell (border, background, radius, padding) for embedding inside another field shell like LabeledField. */
     unstyled?: boolean;
 }
-declare const NumericInput: React.ForwardRefExoticComponent<NumericInputProps & React.RefAttributes<TextInput>>;
+declare const NumericInput: ForwardRefComponent<TextInputInstance, NumericInputProps>;
 export { NumericInput, numericInputVariants, numericInputTextVariants };

package/dist/components/numeric-input/numeric-input.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useMemo, useState } from 'react';
-import { Platform, Pressable, Text, TextInput, View } from 'react-native';
+import { Platform, Pressable, Text, TextInput, View, } from 'react-native';
 import { cn } from '../../lib/cn';
 import { focusRing } from '../../lib/focus-ring';
 import { tv } from '../../lib/tv';
@@ -66,70 +66,89 @@ function roundToStepPrecision(value, step) {
     const decimals = step >= 1 ? 0 : (step.toString().split('.')[1]?.length ?? 2);
     return Number(value.toFixed(decimals));
 }
-const NumericInput = React.forwardRef(({ className, inputClassName, prefix, suffix, value, defaultValue, onValueChange, min, max, step = 1, showSteppers = false, unstyled = false, variant = 'default', size = 'default', editable = true, placeholderTextColor, onBlur, style: styleProp, ...props }, ref) => {
-    const colors = useThemeColors();
-    const interaction = useInteractionTokens();
-    const visual = useVisualTokens();
+function useNumericInputModel({ value, defaultValue, min, max, step, editable, onValueChange, onBlur, }) {
     const [internalText, setInternalText] = useState(() => toInputText(defaultValue));
     const isControlled = value !== undefined;
     const textValue = isControlled ? toInputText(value) : internalText;
     const currentValue = useMemo(() => parseNumericText(textValue), [textValue]);
-    const setTextAndValue = useCallback((nextText) => {
-        if (!isControlled) {
-            setInternalText(nextText);
-        }
-        onValueChange?.(parseNumericText(nextText));
-    }, [isControlled, onValueChange]);
     const applyNumericValue = useCallback((nextValue) => {
-        if (nextValue === null) {
-            if (!isControlled) {
-                setInternalText('');
-            }
-            onValueChange?.(null);
-            return;
-        }
-        const clamped = clampValue(nextValue, min, max);
-        if (!isControlled) {
+        const clamped = nextValue === null ? null : clampValue(nextValue, min, max);
+        if (!isControlled)
             setInternalText(toInputText(clamped));
-        }
         onValueChange?.(clamped);
     }, [isControlled, max, min, onValueChange]);
-    const handleTextChange = (nextText) => {
-        const isNumericLike = /^-?\d*(?:[.,]\d*)?$/.test(nextText);
-        if (!isNumericLike) {
+    const handleTextChange = useCallback((nextText) => {
+        if (!/^-?\d*(?:[.,]\d*)?$/.test(nextText))
             return;
-        }
-        setTextAndValue(nextText);
-    };
-    const handleBlur = (event) => {
+        if (!isControlled)
+            setInternalText(nextText);
+        onValueChange?.(parseNumericText(nextText));
+    }, [isControlled, onValueChange]);
+    const handleBlur = useCallback((event) => {
         const parsed = parseNumericText(textValue);
-        if (parsed !== null) {
-            const rounded = roundToStepPrecision(parsed, step);
-            const clamped = clampValue(rounded, min, max);
-            if (!isControlled) {
-                setInternalText(toInputText(clamped));
-            }
-            onValueChange?.(clamped);
-        }
+        if (parsed !== null)
+            applyNumericValue(roundToStepPrecision(parsed, step));
         onBlur?.(event);
+    }, [applyNumericValue, onBlur, step, textValue]);
+    const nudge = useCallback((delta) => {
+        const baseline = currentValue ?? min ?? 0;
+        applyNumericValue(roundToStepPrecision(baseline + delta * step, step));
+    }, [applyNumericValue, currentValue, min, step]);
+    return {
+        textValue,
+        handleTextChange,
+        handleBlur,
+        nudge,
+        canDecrease: editable && (min === undefined || currentValue === null || currentValue > min),
+        canIncrease: editable && (max === undefined || currentValue === null || currentValue < max),
+    };
+}
+function numericInputTextStyle(visual, size, unstyled, style) {
+    const base = {
+        ...typographyStyle(visual, size === 'compact' ? 'caption' : 'label'),
+        paddingVertical: size === 'compact' ? visual.controlPaddingYSm : visual.controlPaddingYDefault,
+        paddingHorizontal: unstyled ? 0 : visual.controlPaddingXDefault,
     };
-    const canDecrease = editable && (min === undefined || currentValue === null || currentValue > min);
-    const canIncrease = editable && (max === undefined || currentValue === null || currentValue < max);
-    const stepDownStyle = withInteractivePressableStyle(undefined, interaction, {
-        disabled: !canDecrease,
+    return Platform.OS === 'web'
+        ? [{ ...base, width: '100%', minWidth: 0 }, style]
+        : [base, style];
+}
+function NumericAffix({ side, visual, children, }) {
+    if (!children)
+        return null;
+    const spacing = Math.max(8, Math.round(visual.controlPaddingXDefault * 0.5));
+    return (_jsx(View, { style: side === 'prefix' ? { paddingRight: spacing } : { paddingLeft: spacing }, children: children }));
+}
+function NumericStepperButton({ delta, enabled, label, symbol, size, radius, model, interaction, visual, }) {
+    const feedbackStyle = withInteractivePressableStyle(undefined, interaction, {
+        disabled: !enabled,
         disabledVariant: 'subtle',
         pressedVariant: 'default',
     });
-    const stepUpStyle = withInteractivePressableStyle(undefined, interaction, {
-        disabled: !canIncrease,
-        disabledVariant: 'subtle',
-        pressedVariant: 'default',
+    return (_jsx(Pressable, { className: "shrink-0 items-center justify-center bg-secondary", style: (state) => {
+            const baseStyle = typeof feedbackStyle === 'function' ? feedbackStyle(state) : feedbackStyle;
+            return [baseStyle, { width: size, height: size, borderRadius: radius }];
+        }, onPress: () => model.nudge(delta), disabled: !enabled, hitSlop: 4, accessibilityRole: "button", accessibilityLabel: label, children: _jsx(Text, { className: "font-medium text-foreground", style: typographyStyle(visual, 'body'), children: symbol }) }));
+}
+function NumericSteppers({ visible, inset, size, radius, model, interaction, visual, }) {
+    if (!visible)
+        return null;
+    return (_jsxs(View, { className: "shrink-0 flex-row items-center", style: { gap: inset, paddingLeft: Math.max(6, inset) }, children: [_jsx(NumericStepperButton, { delta: -1, enabled: model.canDecrease, label: "Decrease value", symbol: "\u2212", size: size, radius: radius, model: model, interaction: interaction, visual: visual }), _jsx(NumericStepperButton, { delta: 1, enabled: model.canIncrease, label: "Increase value", symbol: "+", size: size, radius: radius, model: model, interaction: interaction, visual: visual })] }));
+}
+const NumericInput = React.forwardRef(({ className, inputClassName, prefix, suffix, value, defaultValue, onValueChange, min, max, step = 1, showSteppers = false, unstyled = false, variant = 'default', size = 'default', editable = true, placeholderTextColor, onBlur, style: styleProp, ...props }, ref) => {
+    const colors = useThemeColors();
+    const interaction = useInteractionTokens();
+    const visual = useVisualTokens();
+    const model = useNumericInputModel({
+        value,
+        defaultValue,
+        min,
+        max,
+        step,
+        editable,
+        onValueChange,
+        onBlur,
     });
-    const nudge = (delta) => {
-        const baseline = currentValue ?? min ?? 0;
-        const raw = baseline + delta * step;
-        applyNumericValue(roundToStepPrecision(raw, step));
-    };
     const controlHeight = size === 'compact' ? visual.controlHeightSm : visual.controlHeightDefault;
     // Steppers render as inset soft buttons, centered inside the field shell.
     const stepInset = Math.max(3, Math.round(controlHeight * 0.1));
@@ -145,35 +164,7 @@ const NumericInput = React.forwardRef(({ className, inputClassName, prefix, suff
                 paddingRight: unstyled ? 0 : showSteppers ? stepInset : 0,
             },
             !editable ? { opacity: interaction.disabledOpacity } : undefined,
-        ], children: [prefix ? (_jsx(View, { style: { paddingRight: Math.max(8, Math.round(visual.controlPaddingXDefault * 0.5)) }, children: prefix })) : null, _jsx(View, { className: "min-w-0 flex-1", style: Platform.OS === 'web' ? { minWidth: 0, flex: 1 } : undefined, children: _jsx(TextInput, { ref: ref, className: cn(numericInputTextVariants({ size }), 'w-full', focusRing, inputClassName), style: Platform.OS === 'web'
-                        ? [
-                            {
-                                ...typographyStyle(visual, size === 'compact' ? 'caption' : 'label'),
-                                width: '100%',
-                                minWidth: 0,
-                                paddingVertical: size === 'compact'
-                                    ? visual.controlPaddingYSm
-                                    : visual.controlPaddingYDefault,
-                                paddingHorizontal: unstyled ? 0 : visual.controlPaddingXDefault,
-                            },
-                            styleProp,
-                        ]
-                        : [
-                            {
-                                ...typographyStyle(visual, size === 'compact' ? 'caption' : 'label'),
-                                paddingVertical: size === 'compact'
-                                    ? visual.controlPaddingYSm
-                                    : visual.controlPaddingYDefault,
-                                paddingHorizontal: unstyled ? 0 : visual.controlPaddingXDefault,
-                            },
-                            styleProp,
-                        ], value: textValue, onChangeText: handleTextChange, onBlur: handleBlur, keyboardType: "decimal-pad", editable: editable, placeholderTextColor: placeholderTextColor ?? colors.placeholder, ...props }) }), suffix ? (_jsx(View, { style: { paddingLeft: Math.max(8, Math.round(visual.controlPaddingXDefault * 0.5)) }, children: suffix })) : null, showSteppers ? (_jsxs(View, { className: "shrink-0 flex-row items-center", style: { gap: stepInset, paddingLeft: Math.max(6, stepInset) }, children: [_jsx(Pressable, { className: "shrink-0 items-center justify-center bg-secondary", style: (state) => {
-                            const baseStyle = typeof stepDownStyle === 'function' ? stepDownStyle(state) : stepDownStyle;
-                            return [baseStyle, { width: stepSize, height: stepSize, borderRadius: stepRadius }];
-                        }, onPress: () => nudge(-1), disabled: !canDecrease, hitSlop: 4, accessibilityRole: "button", accessibilityLabel: "Decrease value", children: _jsx(Text, { className: "font-medium text-foreground", style: typographyStyle(visual, 'body'), children: "\u2212" }) }), _jsx(Pressable, { className: "shrink-0 items-center justify-center bg-secondary", style: (state) => {
-                            const baseStyle = typeof stepUpStyle === 'function' ? stepUpStyle(state) : stepUpStyle;
-                            return [baseStyle, { width: stepSize, height: stepSize, borderRadius: stepRadius }];
-                        }, onPress: () => nudge(1), disabled: !canIncrease, hitSlop: 4, accessibilityRole: "button", accessibilityLabel: "Increase value", children: _jsx(Text, { className: "font-medium text-foreground", style: typographyStyle(visual, 'body'), children: "+" }) })] })) : null] }));
+        ], children: [_jsx(NumericAffix, { side: "prefix", visual: visual, children: prefix }), _jsx(View, { className: "min-w-0 flex-1", style: Platform.OS === 'web' ? { minWidth: 0, flex: 1 } : undefined, children: _jsx(TextInput, { ref: ref, className: cn(numericInputTextVariants({ size }), 'w-full', focusRing, inputClassName), style: numericInputTextStyle(visual, size, unstyled, styleProp), value: model.textValue, onChangeText: model.handleTextChange, onBlur: model.handleBlur, keyboardType: "decimal-pad", editable: editable, placeholderTextColor: placeholderTextColor ?? colors.placeholder, ...props }) }), _jsx(NumericAffix, { side: "suffix", visual: visual, children: suffix }), _jsx(NumericSteppers, { visible: showSteppers, inset: stepInset, size: stepSize, radius: stepRadius, model: model, interaction: interaction, visual: visual })] }));
 });
 NumericInput.displayName = 'NumericInput';
 export { NumericInput, numericInputVariants, numericInputTextVariants };

package/dist/components/otp-input/otp-input.d.ts

@@ -1,82 +1,38 @@
 import { type ViewProps } from 'react-native';
 declare const otpCellVariants: import("tailwind-variants").TVReturnType<{
     size: {
-        default: string;
-        compact: string;
+        default: "w-11";
+        compact: "w-9";
     };
     state: {
-        idle: string;
-        focused: string;
-        error: string;
-        errorFocused: string;
+        idle: "border-border";
+        focused: "border-primary";
+        error: "border-destructive";
+        errorFocused: "border-destructive";
     };
-}, undefined, "items-center justify-center border bg-muted", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "items-center justify-center border bg-muted", {
     size: {
-        default: string;
-        compact: string;
+        default: "w-11";
+        compact: "w-9";
     };
     state: {
-        idle: string;
-        focused: string;
-        error: string;
-        errorFocused: string;
+        idle: "border-border";
+        focused: "border-primary";
+        error: "border-destructive";
+        errorFocused: "border-destructive";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     size: {
-        default: string;
-        compact: string;
+        default: "w-11";
+        compact: "w-9";
     };
     state: {
-        idle: string;
-        focused: string;
-        error: string;
-        errorFocused: string;
+        idle: "border-border";
+        focused: "border-primary";
+        error: "border-destructive";
+        errorFocused: "border-destructive";
     };
-}>, {
-    size: {
-        default: string;
-        compact: string;
-    };
-    state: {
-        idle: string;
-        focused: string;
-        error: string;
-        errorFocused: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    size: {
-        default: string;
-        compact: string;
-    };
-    state: {
-        idle: string;
-        focused: string;
-        error: string;
-        errorFocused: string;
-    };
-}, undefined, "items-center justify-center border bg-muted", import("tailwind-variants/dist/config.js").TVConfig<{
-    size: {
-        default: string;
-        compact: string;
-    };
-    state: {
-        idle: string;
-        focused: string;
-        error: string;
-        errorFocused: string;
-    };
-}, {
-    size: {
-        default: string;
-        compact: string;
-    };
-    state: {
-        idle: string;
-        focused: string;
-        error: string;
-        errorFocused: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 export interface OTPInputProps extends Omit<ViewProps, 'children'> {
     length?: number;
     value?: string;

package/dist/components/popover/popover.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as PopoverPrimitive from '@rn-primitives/popover';
 import { type FrostedSurfaceProps } from '../../lib/frosted-surface';
 import { type OverlayInsets } from '../../lib/overlay-insets';
+import type { ForwardRefComponent } from '../../lib/ref-types';
 export interface PopoverProps {
     onOpenChange?: (open: boolean) => void;
     children: React.ReactNode;
@@ -19,7 +20,7 @@ export interface PopoverCloseProps extends React.ComponentPropsWithoutRef<typeof
     className?: string;
 }
 declare function Popover({ onOpenChange, children }: PopoverProps): React.JSX.Element;
-declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverTriggerProps & React.RefAttributes<import("@rn-primitives/popover").TriggerRef>>;
-declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<import("react-native").View>>;
-declare const PopoverClose: React.ForwardRefExoticComponent<PopoverCloseProps & React.RefAttributes<import("react-native").View>>;
+declare const PopoverTrigger: ForwardRefComponent<PopoverPrimitive.TriggerRef, PopoverTriggerProps>;
+declare const PopoverContent: ForwardRefComponent<PopoverPrimitive.ContentRef, PopoverContentProps>;
+declare const PopoverClose: ForwardRefComponent<PopoverPrimitive.CloseRef, PopoverCloseProps>;
 export { Popover, PopoverTrigger, PopoverContent, PopoverClose };

package/dist/components/pressable/pressable.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import { type PressableProps as RNPressableProps } from 'react-native';
+import { type PressableInstance, type PressableProps as RNPressableProps } from 'react-native';
 import { type DisabledVariant, type PressedVariant } from '../../lib/interaction-tokens';
+import type { ForwardRefComponent } from '../../lib/ref-types';
 export interface PressableProps extends RNPressableProps {
     className?: string;
     /** Semantic press feedback. `none` preserves a plain React Native Pressable. */
@@ -10,5 +10,5 @@ export interface PressableProps extends RNPressableProps {
     /** Loading controls are busy and non-interactive, just like disabled controls. */
     loading?: boolean;
 }
-declare const Pressable: React.ForwardRefExoticComponent<PressableProps & React.RefAttributes<import("react-native").View>>;
+declare const Pressable: ForwardRefComponent<PressableInstance, PressableProps>;
 export { Pressable };

package/dist/components/progress/progress.d.ts

@@ -1,52 +1,28 @@
-import React from 'react';
-import { View, type ViewProps } from 'react-native';
+import { type ViewInstance, type ViewProps } from 'react-native';
 import { type VariantProps } from '../../lib/tv';
+import type { ForwardRefComponent } from '../../lib/ref-types';
 declare const progressVariants: import("tailwind-variants").TVReturnType<{
     size: {
-        sm: string;
-        default: string;
-        lg: string;
+        sm: "h-1.5";
+        default: "h-3";
+        lg: "h-5";
     };
-}, undefined, "h-3 w-full overflow-hidden rounded-full bg-secondary", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "h-3 w-full overflow-hidden rounded-full bg-secondary", {
     size: {
-        sm: string;
-        default: string;
-        lg: string;
+        sm: "h-1.5";
+        default: "h-3";
+        lg: "h-5";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     size: {
-        sm: string;
-        default: string;
-        lg: string;
+        sm: "h-1.5";
+        default: "h-3";
+        lg: "h-5";
     };
-}>, {
-    size: {
-        sm: string;
-        default: string;
-        lg: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    size: {
-        sm: string;
-        default: string;
-        lg: string;
-    };
-}, undefined, "h-3 w-full overflow-hidden rounded-full bg-secondary", import("tailwind-variants/dist/config.js").TVConfig<{
-    size: {
-        sm: string;
-        default: string;
-        lg: string;
-    };
-}, {
-    size: {
-        sm: string;
-        default: string;
-        lg: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 export interface ProgressProps extends ViewProps, VariantProps<typeof progressVariants> {
     value?: number;
     indicatorClassName?: string;
 }
-declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<View>>;
+declare const Progress: ForwardRefComponent<ViewInstance, ProgressProps>;
 export { Progress, progressVariants };