@thewhileloop/whileui 1.2.3 → 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 rounded-md border 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 rounded-md border 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, "px-3 py-2 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, "px-3 py-2 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;
@@ -113,7 +58,8 @@ export interface NumericInputProps extends Omit<TextInputProps, 'value' | 'defau
     max?: number;
     step?: number;
     showSteppers?: boolean;
+    /** 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 };
-//# sourceMappingURL=numeric-input.d.ts.map

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

@@ -1,20 +1,23 @@
 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';
 import { useThemeColors } from '../../lib/theme-colors';
 import { useInteractionTokens, withInteractivePressableStyle } from '../../lib/interaction-tokens';
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { typographyStyle } from '../../lib/recipes';
 const numericInputVariants = tv({
-    base: 'w-full flex-row items-center rounded-md border border-border bg-muted',
+    base: 'w-full flex-row items-center border-border bg-muted',
     variants: {
         variant: {
             default: 'border-border',
             error: 'border-destructive',
         },
         size: {
-            default: 'h-10',
-            compact: 'h-9',
+            default: '',
+            compact: '',
         },
     },
     defaultVariants: {
@@ -23,34 +26,17 @@ const numericInputVariants = tv({
     },
 });
 const numericInputTextVariants = tv({
-    base: 'px-3 py-2 text-foreground',
+    base: 'text-foreground',
     variants: {
         size: {
-            default: 'text-sm',
-            compact: 'text-xs',
+            default: '',
+            compact: '',
         },
     },
     defaultVariants: {
         size: 'default',
     },
 });
-const stepperButtonVariants = tv({
-    base: 'h-full w-11 items-center justify-center',
-    variants: {
-        size: {
-            default: 'px-3',
-            compact: 'px-2',
-        },
-        disabled: {
-            true: '',
-            false: '',
-        },
-    },
-    defaultVariants: {
-        size: 'default',
-        disabled: false,
-    },
-});
 function toInputText(value) {
     if (value === null || value === undefined) {
         return '';
@@ -80,71 +66,105 @@ 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, variant = 'default', size = 'default', editable = true, placeholderTextColor, onBlur, style: styleProp, ...props }, ref) => {
-    const colors = useThemeColors();
-    const interaction = useInteractionTokens();
+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));
-    };
-    return (_jsxs(View, { className: cn(numericInputVariants({ variant, size }), className), style: !editable ? { opacity: interaction.disabledOpacity } : undefined, children: [prefix ? _jsx(View, { className: "shrink-0 pl-3", 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 outline-none', inputClassName), style: Platform.OS === 'web' ? [{ width: '100%', minWidth: 0 }, styleProp] : styleProp, value: textValue, onChangeText: handleTextChange, onBlur: handleBlur, keyboardType: "decimal-pad", editable: editable, placeholderTextColor: placeholderTextColor ?? colors.placeholder, ...props }) }), suffix ? _jsx(View, { className: "shrink-0 pr-3", children: suffix }) : null, showSteppers ? (_jsxs(View, { className: "h-full shrink-0 flex-row border-l border-border bg-muted", children: [_jsx(Pressable, { className: cn(stepperButtonVariants({ size, disabled: !canDecrease }), 'shrink-0 min-w-11 border-r border-border'), style: stepDownStyle, onPress: () => nudge(-1), disabled: !canDecrease, hitSlop: 4, accessibilityRole: "button", accessibilityLabel: "Decrease value", children: _jsx(Text, { className: "text-base font-medium text-foreground", children: "-" }) }), _jsx(Pressable, { className: cn(stepperButtonVariants({ size, disabled: !canIncrease }), 'shrink-0 min-w-11'), style: stepUpStyle, onPress: () => nudge(1), disabled: !canIncrease, hitSlop: 4, accessibilityRole: "button", accessibilityLabel: "Increase value", children: _jsx(Text, { className: "text-base font-medium text-foreground", children: "+" }) })] })) : null] }));
+    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));
+    const stepSize = controlHeight - stepInset * 2;
+    const stepRadius = Math.max(3, Math.min(visual.radiusMd, Math.round(stepSize / 3)));
+    return (_jsxs(View, { className: cn(numericInputVariants({ variant, size }), unstyled && 'bg-transparent', className), style: [
+            {
+                // Definite height (not minHeight) so inner elements can center reliably.
+                height: controlHeight,
+                borderWidth: unstyled ? 0 : visual.borderWidthControl,
+                borderRadius: unstyled ? 0 : visual.radiusLg,
+                paddingLeft: !unstyled && prefix ? visual.controlPaddingXDefault : 0,
+                paddingRight: unstyled ? 0 : showSteppers ? stepInset : 0,
+            },
+            !editable ? { opacity: interaction.disabledOpacity } : undefined,
+        ], 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 };
-//# sourceMappingURL=numeric-input.js.map

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

@@ -1,2 +1 @@
 export { OTPInput, otpCellVariants, type OTPInputProps } from './otp-input';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/otp-input/index.js

@@ -1,2 +1 @@
 export { OTPInput, otpCellVariants } from './otp-input';
-//# sourceMappingURL=index.js.map

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 rounded-lg 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 rounded-lg 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;
@@ -89,9 +45,8 @@ export interface OTPInputProps extends Omit<ViewProps, 'children'> {
     autoFocus?: boolean;
     className?: string;
 }
-declare function OTPInput({ length, value: controlledValue, onValueChange, onComplete, variant, size, secure, disabled, autoFocus, className, ...props }: OTPInputProps): import("react/jsx-runtime").JSX.Element;
+declare function OTPInput({ length, value: controlledValue, onValueChange, onComplete, variant, size, secure, disabled, autoFocus, className, ...props }: OTPInputProps): import("react").JSX.Element;
 declare namespace OTPInput {
     var displayName: string;
 }
 export { OTPInput, otpCellVariants };
-//# sourceMappingURL=otp-input.d.ts.map

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

@@ -7,21 +7,21 @@ import { cn } from '../../lib/cn';
 import { tv } from '../../lib/tv';
 import { useThemeColors } from '../../lib/theme-colors';
 import { useInteractionTokens } from '../../lib/interaction-tokens';
-// ─── Variants ─────────────────────────────────────────────────
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { typographyStyle } from '../../lib/recipes';
 const otpCellVariants = tv({
-    base: 'items-center justify-center rounded-lg border bg-muted',
+    base: 'items-center justify-center border bg-muted',
     variants: {
-        size: { default: 'h-12 w-11', compact: 'h-10 w-9' },
+        size: { default: 'w-11', compact: 'w-9' },
         state: {
             idle: 'border-border',
-            focused: 'border-primary border-2',
+            focused: 'border-primary',
             error: 'border-destructive',
-            errorFocused: 'border-destructive border-2',
+            errorFocused: 'border-destructive',
         },
     },
     defaultVariants: { size: 'default', state: 'idle' },
 });
-// ─── Component ───────────────────────────────────────────────
 function OTPInput({ length = 6, value: controlledValue, onValueChange, onComplete, variant = 'default', size = 'default', secure = false, disabled = false, autoFocus = false, className, ...props }) {
     const [internalValue, setInternalValue] = useState('');
     const isControlled = controlledValue !== undefined;
@@ -29,6 +29,7 @@ function OTPInput({ length = 6, value: controlledValue, onValueChange, onComplet
     const [focused, setFocused] = useState(false);
     const colors = useThemeColors();
     const interaction = useInteractionTokens();
+    const visual = useVisualTokens();
     const shakeX = useSharedValue(0);
     useEffect(() => {
         if (variant !== 'error')
@@ -59,17 +60,21 @@ function OTPInput({ length = 6, value: controlledValue, onValueChange, onComplet
                         : isCursor
                             ? 'focused'
                             : 'idle';
-                    return (_jsx(View, { className: otpCellVariants({ size, state }), children: digit ? (_jsx(Text, { className: cn('text-foreground font-semibold', size === 'compact' ? 'text-base' : 'text-lg'), children: secure ? '●' : digit })) : isCursor ? (_jsx(CursorBlink, { color: isError ? colors.destructive : colors.primary })) : null }, i));
+                    return (_jsx(View, { className: otpCellVariants({ size, state }), style: {
+                            height: size === 'compact' ? visual.controlHeightDefault : visual.controlHeightLg,
+                            borderRadius: visual.radiusMd,
+                            borderWidth: isCursor ? visual.borderWidthEmphasis : visual.borderWidthControl,
+                        }, children: digit ? (_jsx(Text, { className: cn('text-foreground font-semibold'), style: typographyStyle(visual, size === 'compact' ? 'body' : 'emphasis'), children: secure ? '●' : digit })) : isCursor ? (_jsx(CursorBlink, { color: isError ? colors.destructive : colors.primary })) : null }, i));
                 }) }), _jsx(TextInput, { value: val, onChangeText: update, onFocus: () => setFocused(true), onBlur: () => setFocused(false), keyboardType: "number-pad", textContentType: "oneTimeCode", autoComplete: Platform.OS === 'android' ? 'sms-otp' : 'one-time-code', maxLength: length, autoFocus: autoFocus, editable: !disabled, caretHidden: true, className: "outline-none", style: {
                     position: 'absolute',
                     top: 0,
                     left: 0,
                     right: 0,
                     bottom: 0,
+                    opacity: 0,
                     color: 'transparent',
                 }, accessibilityLabel: `Enter ${length}-digit verification code` })] }));
 }
-// ─── Cursor Blink ─────────────────────────────────────────────
 function CursorBlink({ color }) {
     const opacity = useSharedValue(1);
     useEffect(() => {
@@ -85,4 +90,3 @@ function CursorBlink({ color }) {
 }
 OTPInput.displayName = 'OTPInput';
 export { OTPInput, otpCellVariants };
-//# sourceMappingURL=otp-input.js.map

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

@@ -1,2 +1 @@
 export { Popover, PopoverTrigger, PopoverContent, PopoverClose, type PopoverProps, type PopoverTriggerProps, type PopoverContentProps, type PopoverCloseProps, } from './popover';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/popover/index.js

@@ -1,2 +1 @@
 export { Popover, PopoverTrigger, PopoverContent, PopoverClose, } from './popover';
-//# sourceMappingURL=index.js.map

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

@@ -1,6 +1,8 @@
 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;
@@ -11,13 +13,14 @@ export interface PopoverTriggerProps extends React.ComponentPropsWithoutRef<type
 export interface PopoverContentProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>, FrostedSurfaceProps {
     className?: string;
     portalHost?: string;
+    /** Collision padding. Defaults to safe area plus a margin so the panel never sits flush against an edge. */
+    insets?: Partial<OverlayInsets>;
 }
 export interface PopoverCloseProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Close> {
     className?: string;
 }
-declare function Popover({ onOpenChange, children }: PopoverProps): import("react/jsx-runtime").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 function Popover({ onOpenChange, children }: PopoverProps): React.JSX.Element;
+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 };
-//# sourceMappingURL=popover.d.ts.map

package/dist/components/popover/popover.js

@@ -4,13 +4,16 @@ import { Platform, StyleSheet } from 'react-native';
 import * as PopoverPrimitive from '@rn-primitives/popover';
 import { cn } from '../../lib/cn';
 import { useFrostedSurface } from '../../lib/frosted-surface';
-// ─── Components ──────────────────────────────────────────────
+import { useOverlayInsets } from '../../lib/overlay-insets';
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { useThemeColors } from '../../lib/theme-colors';
+import { shadowStyle, surfacePadding, surfaceRadius } from '../../lib/recipes';
 function Popover({ onOpenChange, children }) {
     return _jsx(PopoverPrimitive.Root, { onOpenChange: onOpenChange, children: children });
 }
 const PopoverTrigger = React.forwardRef(({ className, ...props }, ref) => (_jsx(PopoverPrimitive.Trigger, { ref: ref, className: cn(className), ...props })));
 PopoverTrigger.displayName = 'PopoverTrigger';
-const PopoverContent = React.forwardRef(({ className, align = 'center', sideOffset = 4, portalHost, children, style, frosted = false, blurIntensity, blurTintToken, ...props }, ref) => {
+const PopoverContent = React.forwardRef(({ className, align = 'center', sideOffset = 4, insets, portalHost, children, style, frosted = false, blurIntensity, blurTintToken, ...props }, ref) => {
     const frostedSurface = useFrostedSurface({
         frosted,
         blurIntensity,
@@ -18,12 +21,27 @@ const PopoverContent = React.forwardRef(({ className, align = 'center', sideOffs
         defaultTintToken: 'popover',
         defaultBlurPreset: 'subtle',
     });
+    const visual = useVisualTokens();
+    const colors = useThemeColors();
+    // Keeps the panel off the screen edge and out from under the notch.
+    const defaultInsets = useOverlayInsets();
+    const resolvedInsets = { ...defaultInsets, ...insets };
+    // NOTE: native only. `@rn-primitives/popover`'s web build destructures `insets`
+    // away (`insets: _insets`) and hands Radix a fixed allowlist that has no room for
+    // `collisionPadding`, so a web popover next to an edge still lands flush against it.
+    // Fixing that needs a `.web.tsx` talking to Radix directly.
     const resolvedStyle = StyleSheet.flatten([
         Platform.OS === 'web' ? undefined : contentStyles,
+        {
+            borderRadius: surfaceRadius(visual, 'lg'),
+            borderWidth: visual.borderWidthHairline,
+            padding: surfacePadding(visual, 'sm'),
+        },
+        shadowStyle(visual, colors, 'md'),
         frostedSurface.surfaceStyle,
         style,
     ]);
-    return (_jsx(PopoverPrimitive.Portal, { hostName: portalHost, children: _jsx(PopoverPrimitive.Overlay, { style: Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined, children: _jsxs(PopoverPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, className: cn('z-50 w-72 rounded-lg border border-border p-4 shadow-lg relative overflow-hidden', frosted ? 'bg-transparent' : 'bg-popover', 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), style: resolvedStyle, ...props, children: [frostedSurface.overlay, children] }) }) }));
+    return (_jsx(PopoverPrimitive.Portal, { hostName: portalHost, children: _jsx(PopoverPrimitive.Overlay, { style: Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined, children: _jsxs(PopoverPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, insets: resolvedInsets, className: cn('z-50 w-72 border-border relative overflow-hidden', frosted ? 'bg-transparent' : 'bg-popover', 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), style: resolvedStyle, ...props, children: [frostedSurface.overlay, children] }) }) }));
 });
 PopoverContent.displayName = 'PopoverContent';
 const PopoverClose = React.forwardRef(({ className, ...props }, ref) => (_jsx(PopoverPrimitive.Close, { ref: ref, className: cn(className), ...props })));
@@ -32,4 +50,3 @@ const contentStyles = {
     position: 'absolute',
 };
 export { Popover, PopoverTrigger, PopoverContent, PopoverClose };
-//# sourceMappingURL=popover.js.map

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

@@ -1,2 +1 @@
 export { Pressable, type PressableProps } from './pressable';
-//# sourceMappingURL=index.d.ts.map