@thewhileloop/whileui 1.2.3 → 2.0.0

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

@@ -10,7 +10,7 @@ declare const numericInputVariants: import("tailwind-variants").TVReturnType<{
         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<{
+}, undefined, "w-full flex-row items-center border-border bg-muted", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         error: string;
@@ -46,7 +46,7 @@ declare const numericInputVariants: import("tailwind-variants").TVReturnType<{
         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<{
+}, undefined, "w-full flex-row items-center border-border bg-muted", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         error: string;
@@ -70,7 +70,7 @@ declare const numericInputTextVariants: import("tailwind-variants").TVReturnType
         default: string;
         compact: string;
     };
-}, undefined, "px-3 py-2 text-foreground", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "text-foreground", import("tailwind-variants/dist/config.js").TVConfig<{
     size: {
         default: string;
         compact: string;
@@ -90,7 +90,7 @@ declare const numericInputTextVariants: import("tailwind-variants").TVReturnType
         default: string;
         compact: string;
     };
-}, undefined, "px-3 py-2 text-foreground", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "text-foreground", import("tailwind-variants/dist/config.js").TVConfig<{
     size: {
         default: string;
         compact: string;
@@ -113,7 +113,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>>;
 export { NumericInput, numericInputVariants, numericInputTextVariants };
-//# sourceMappingURL=numeric-input.d.ts.map

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

@@ -2,19 +2,22 @@ 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 { 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,9 +66,10 @@ 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 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 [internalText, setInternalText] = useState(() => toInputText(defaultValue));
     const isControlled = value !== undefined;
     const textValue = isControlled ? toInputText(value) : internalText;
@@ -143,8 +130,50 @@ const NumericInput = React.forwardRef(({ className, inputClassName, prefix, suff
         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: [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] }));
 });
 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

@@ -10,7 +10,7 @@ declare const otpCellVariants: import("tailwind-variants").TVReturnType<{
         error: string;
         errorFocused: string;
     };
-}, 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", import("tailwind-variants/dist/config.js").TVConfig<{
     size: {
         default: string;
         compact: string;
@@ -54,7 +54,7 @@ declare const otpCellVariants: import("tailwind-variants").TVReturnType<{
         error: string;
         errorFocused: string;
     };
-}, 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", import("tailwind-variants/dist/config.js").TVConfig<{
     size: {
         default: string;
         compact: string;
@@ -89,9 +89,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,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';
 export interface PopoverProps {
     onOpenChange?: (open: boolean) => void;
     children: React.ReactNode;
@@ -11,13 +12,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 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>>;
 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

package/dist/components/pressable/index.js

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

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

@@ -1,8 +1,14 @@
 import React from 'react';
 import { type PressableProps as RNPressableProps } from 'react-native';
+import { type DisabledVariant, type PressedVariant } from '../../lib/interaction-tokens';
 export interface PressableProps extends RNPressableProps {
     className?: string;
+    /** Semantic press feedback. `none` preserves a plain React Native Pressable. */
+    feedback?: PressedVariant;
+    /** Opacity used while the control is unavailable. */
+    disabledFeedback?: DisabledVariant;
+    /** 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>>;
 export { Pressable };
-//# sourceMappingURL=pressable.d.ts.map

package/dist/components/pressable/pressable.js

@@ -1,10 +1,53 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { Pressable as RNPressable } from 'react-native';
+import { Platform, Pressable as RNPressable, } from 'react-native';
 import { cn } from '../../lib/cn';
-const Pressable = React.forwardRef(({ className, ...props }, ref) => {
-    return _jsx(RNPressable, { ref: ref, className: cn(className), ...props });
+import { useInteractionTokens, } from '../../lib/interaction-tokens';
+import { useMotionPolicy } from '../../lib/motion-policy';
+function pressedOpacity(variant, tokens) {
+    if (variant === 'none')
+        return 1;
+    return variant === 'strong' ? tokens.pressOpacityStrong : tokens.pressOpacity;
+}
+function disabledOpacity(variant, tokens) {
+    if (variant === 'none')
+        return 1;
+    if (variant === 'soft')
+        return tokens.disabledOpacitySoft;
+    if (variant === 'subtle')
+        return tokens.disabledOpacitySubtle;
+    return tokens.disabledOpacity;
+}
+const Pressable = React.forwardRef(({ className, feedback = 'none', disabledFeedback = 'default', loading = false, disabled = false, accessibilityState, style, ...props }, ref) => {
+    const interaction = useInteractionTokens();
+    const motion = useMotionPolicy();
+    const unavailable = disabled || loading;
+    const restingOpacity = unavailable ? disabledOpacity(disabledFeedback, interaction) : 1;
+    const activeOpacity = pressedOpacity(feedback, interaction);
+    const resolveStyle = (state) => {
+        const callerStyle = typeof style === 'function' ? style(state) : style;
+        const feedbackOpacity = unavailable
+            ? restingOpacity
+            : state.pressed && feedback !== 'none'
+                ? activeOpacity
+                : undefined;
+        const feedbackStyle = feedbackOpacity === undefined ? null : { opacity: feedbackOpacity };
+        if (Platform.OS !== 'web')
+            return [callerStyle, feedbackStyle];
+        const transition = motion.animationsEnabled
+            ? {
+                transitionProperty: 'opacity',
+                transitionDuration: `${motion.durations.fast}ms`,
+                transitionTimingFunction: 'ease-out',
+            }
+            : null;
+        return [callerStyle, transition, feedbackStyle];
+    };
+    return (_jsx(RNPressable, { ref: ref, className: cn(className), disabled: unavailable, accessibilityState: {
+            ...accessibilityState,
+            disabled: unavailable || accessibilityState?.disabled,
+            busy: loading || accessibilityState?.busy,
+        }, "aria-busy": loading || undefined, style: resolveStyle, ...props }));
 });
 Pressable.displayName = 'Pressable';
 export { Pressable };
-//# sourceMappingURL=pressable.js.map

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

@@ -1,2 +1 @@
 export { Progress, progressVariants, type ProgressProps } from './progress';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/progress/index.js

@@ -1,2 +1 @@
 export { Progress, progressVariants } from './progress';
-//# sourceMappingURL=index.js.map

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

@@ -50,4 +50,3 @@ export interface ProgressProps extends ViewProps, VariantProps<typeof progressVa
 }
 declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<View>>;
 export { Progress, progressVariants };
-//# sourceMappingURL=progress.d.ts.map

package/dist/components/progress/progress.js

@@ -18,8 +18,11 @@ const progressVariants = tv({
 });
 const Progress = React.forwardRef(({ className, value = 0, size, indicatorClassName, ...props }, ref) => {
     const clampedValue = Math.max(0, Math.min(100, value));
-    return (_jsx(View, { ref: ref, className: cn(progressVariants({ size }), className), accessibilityRole: "progressbar", accessibilityValue: { min: 0, max: 100, now: clampedValue }, ...props, children: _jsx(View, { className: cn('h-full rounded-full bg-primary', indicatorClassName), style: { width: `${clampedValue}%` } }) }));
+    return (_jsx(View, { ref: ref, className: cn(progressVariants({ size }), className), accessibilityRole: "progressbar", accessibilityValue: { min: 0, max: 100, now: clampedValue }, 
+        // A progress bar announcing "60 percent" of nothing is not useful, and a
+        // progressbar with no name fails WCAG 4.1.2. Callers should say what is
+        // progressing; this is the floor, not the answer.
+        accessibilityLabel: "Progress", ...props, children: _jsx(View, { className: cn('h-full rounded-full bg-primary', indicatorClassName), style: { width: `${clampedValue}%` } }) }));
 });
 Progress.displayName = 'Progress';
 export { Progress, progressVariants };
-//# sourceMappingURL=progress.js.map

package/dist/components/radio-group/index.d.ts

@@ -1,2 +1 @@
 export { RadioGroup, RadioGroupItem, type RadioGroupProps, type RadioGroupItemProps, } from './radio-group';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/radio-group/index.js

@@ -1,2 +1 @@
 export { RadioGroup, RadioGroupItem, } from './radio-group';
-//# sourceMappingURL=index.js.map

package/dist/components/radio-group/radio-group.d.ts

@@ -9,13 +9,12 @@ export interface RadioGroupItemProps extends PressableProps {
     value: string;
     className?: string;
 }
-declare function RadioGroup({ defaultValue, value: controlledValue, onValueChange, className, children, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function RadioGroup({ defaultValue, value: controlledValue, onValueChange, className, children, ...props }: RadioGroupProps): import("react").JSX.Element;
 declare namespace RadioGroup {
     var displayName: string;
 }
-declare function RadioGroupItem({ value: itemValue, className, ...props }: RadioGroupItemProps): import("react/jsx-runtime").JSX.Element;
+declare function RadioGroupItem({ value: itemValue, className, ...props }: RadioGroupItemProps): import("react").JSX.Element;
 declare namespace RadioGroupItem {
     var displayName: string;
 }
 export { RadioGroup, RadioGroupItem };
-//# sourceMappingURL=radio-group.d.ts.map

package/dist/components/radio-group/radio-group.js

@@ -1,27 +1,36 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useState } from 'react';
+import { createContext, useCallback, useContext, useMemo, useState } from 'react';
 import { View, Pressable } from 'react-native';
 import { cn } from '../../lib/cn';
+import { focusRing } from '../../lib/focus-ring';
+import { useVisualTokens } from '../../lib/visual-tokens';
 const RadioGroupContext = createContext({
     value: '',
     onValueChange: () => { },
 });
-// ─── Components ──────────────────────────────────────────────
 function RadioGroup({ defaultValue = '', value: controlledValue, onValueChange, className, children, ...props }) {
     const [internalValue, setInternalValue] = useState(defaultValue);
     const value = controlledValue ?? internalValue;
-    const handleValueChange = (newValue) => {
+    const handleValueChange = useCallback((newValue) => {
         setInternalValue(newValue);
         onValueChange?.(newValue);
-    };
-    return (_jsx(RadioGroupContext.Provider, { value: { value, onValueChange: handleValueChange }, children: _jsx(View, { className: cn('gap-2', className), ...props, children: children }) }));
+    }, [onValueChange]);
+    const contextValue = useMemo(() => ({ value, onValueChange: handleValueChange }), [handleValueChange, value]);
+    return (_jsx(RadioGroupContext.Provider, { value: contextValue, children: _jsx(View, { className: cn('gap-2', className), ...props, children: children }) }));
 }
 function RadioGroupItem({ value: itemValue, className, ...props }) {
     const { value, onValueChange } = useContext(RadioGroupContext);
+    const visual = useVisualTokens();
     const isSelected = value === itemValue;
-    return (_jsx(Pressable, { className: cn('h-5 w-5 rounded-full border-2 items-center justify-center', isSelected ? 'border-primary' : 'border-border', className), onPress: () => onValueChange(itemValue), hitSlop: { top: 12, bottom: 12, left: 12, right: 12 }, ...props, children: isSelected && _jsx(View, { className: "h-2.5 w-2.5 rounded-full bg-primary" }) }));
+    const size = Math.max(18, Math.round(visual.controlHeightSm * 0.55));
+    const dotSize = Math.max(8, Math.round(size * 0.5));
+    return (_jsx(Pressable, { accessibilityRole: "radio", accessibilityState: { checked: isSelected }, "aria-checked": isSelected, className: cn('items-center justify-center', isSelected ? 'border-primary' : 'border-border', focusRing, className), style: {
+            width: size,
+            height: size,
+            borderWidth: visual.borderWidthEmphasis,
+            borderRadius: size / 2,
+        }, onPress: () => onValueChange(itemValue), hitSlop: { top: 12, bottom: 12, left: 12, right: 12 }, ...props, children: isSelected && (_jsx(View, { className: "bg-primary", style: { width: dotSize, height: dotSize, borderRadius: dotSize / 2 } })) }));
 }
 RadioGroup.displayName = 'RadioGroup';
 RadioGroupItem.displayName = 'RadioGroupItem';
 export { RadioGroup, RadioGroupItem };
-//# sourceMappingURL=radio-group.js.map

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

@@ -1,2 +1 @@
 export { Row, rowVariants, type RowProps } from './row';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/row/index.js

@@ -1,2 +1 @@
 export { Row, rowVariants } from './row';
-//# sourceMappingURL=index.js.map

package/dist/components/row/row.d.ts

@@ -182,4 +182,3 @@ export interface RowProps extends Omit<ViewProps, 'className'>, VariantProps<typ
 }
 declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttributes<View>>;
 export { Row, rowVariants };
-//# sourceMappingURL=row.d.ts.map

package/dist/components/row/row.js

@@ -42,4 +42,3 @@ const Row = React.forwardRef(({ className, gap, align, justify, ...props }, ref)
 });
 Row.displayName = 'Row';
 export { Row, rowVariants };
-//# sourceMappingURL=row.js.map

package/dist/components/segmented-control/index.d.ts

@@ -1,2 +1 @@
 export { SegmentedControl, SegmentedControlItem, SegmentedControlItemText, segmentedControlVariants, segmentedControlItemVariants, segmentedControlItemTextVariants, type SegmentedControlProps, type SegmentedControlItemProps, type SegmentedControlItemTextProps, } from './segmented-control';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/segmented-control/index.js

@@ -1,2 +1 @@
 export { SegmentedControl, SegmentedControlItem, SegmentedControlItemText, segmentedControlVariants, segmentedControlItemVariants, segmentedControlItemTextVariants, } from './segmented-control';
-//# sourceMappingURL=index.js.map